Global Styling STEP 3 (Text Styling) Set your Heading, SubHeading & Paragraph Fonts across your Site

Setting your Global Text Styling FIRST (on both Desktop & Mobile and before making any on-page styling changes) will automatically update the text and headings across all pages to YOUR desired fonts, font sizing & font spacing. 

If you want to edit your text or headings, you will then be able do so with one click vs. having to edit each individual text widget across your pages.

It will also ensure that your mobile view matches your desktop view, will reduce the need to tweak, edit or create mobile views in general and will ensure everything looks clean, consistent and beautiful!  

Please watch this video for a comprehensive overview before you begin:

PLEASE FOLLOW THESE INSTRUCTIONS: 

1) Once you have added your desired Fonts to the Global Styling > Add Fonts area (see Related Article at the bottom of this page on Adding Fonts) you'll next be able to set what font (size, font, spacing, etc.) should go where on your site. 

To get to the Text Styling Area - click on the brush icon to get to Global Styling, then click "Text Styling" 

The Text you'll be able to set styling for includes:

Paragraph (main body copy font)

Heading 1 (typically used once on a page at the top)

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Quote

We typically recommend having no more than 4 different fonts used here.

Typically you'll set:

-A Paragraph font

This is the main body copy text on your pages.

Note: If you add a new "Text Widget" to your page - it will be set to whatever font you set here in "Paragraph font".

-A Heading font

There are actually 6 different Headers that can be set (H1-H6 -see link below for further info). We recommend adding your main branded "Heading Font" into at least the H1, H2 and/or H3 spots.

Note: When you add a new "Heading Widget" to your page - it will default to the H2 font choices - however you can choose the drop-down arrow to the left of the text editing toolbar to select a different Heading style on-page.

-An Optional Subheading font

If you have a different "subhead" font in your branded font palette - we recommend adding this into the H3, H4 and/or H5 spots.

Hint: If your chosen started template has multiple fonts - just swap out the "subhead" font for your own "subhead" font in whatever H positions they were set to originally.

-An Optional Accent font

If you are using a "script" or "handwritten" style font in your branded font palette - it may be best to keep that as an "accent" on your pages for user readability.

Hint: In many ShinePages templates, if an "accent" font is used, it is placed in the H6 position

Please see this article on Header Tags - H1, H2, H3, etc.

NOTE: It's important to set your font in both the 1) Desktop Text Styling AND the 2) Mobile Text Styling screens. Typically the Mobile Text styling should match the Desktop's selections - just make everything smaller! 

1) EDIT your Text Styling in Desktop view:

Click the "Click to Edit" button next to each text option on this screen to edit the: 

Font Choice (from a dropdown list of added fonts as well as a selection of general web fonts)

Font Size

Letter Spacing

Line Height

& Text Color 

for each of the Headings, Paragraph and Quote font down the screen.

2) EDIT your Text Styling in Mobile view:

After you have updated the text styling updates for the "Desktop" - you will need to make the same updates for the mobile view of your pages.

To do this - toggle to the "Mobile" Text Styling screen and edit accordingly as per above instructions. 

(Please see Related Articles at the bottom of the page for further details on Mobile Editing) 

Once you have made all edits to the Text Styling screen - click the pink "Confirm" button at the bottom of the screen to save your changes. 

As you make these changes, you should notice that any parts of your template that were set to the previous or original template's Text Styling choices should now be changed to your new Text Styling font choices :)

Note: you CAN edit and tweak each text or heading element on your page individually - however, by setting your "Global Text Styling" first, you will set the foundation for your site - both on desktop and on mobile.

If you make an on-page edit to any specific Text or Header styling element (by adjusting font, size, spacing, color etc. away from the "Global Text Styling" settings) you have now overridden the global settings and set that element's style individually.  The Global Text Styling settings for that element will no longer apply and you will not see changes made on the page when you make edits to Global Text Styling. 

- Please see this article on Trouble-Shooting Text Styling Issues