Changing Fonts

To change your website's various fonts, go to Online Store > Design. Double-click your "Theme" then go to the "Colors" tab. Here you will find "Typography" Options.

Changing the Font Family

You can adjust your website's default text font by adjusting the "Text Font Family" option. SCE supports modern fonts such as "Roboto" and "Playfair Display" as well as the classic "Arial" and "Helvetica" among others. Each option will have fallback font types such as "Serif" and "Sans-Serif" in case a device is not capable of showing the font you have selected.

Changing the Font Color

To change your website's "Text Color" click the "..." to open the "Color Selection Dialog". You can use the various color options or enter the precise "Hexadecimal Color Value" in the input box. There is also an "Eye Dropper" tool for choosing a color that appears on your screen.

Changing the Font Size and Line Height

Font Sizes and Line Heights should always be adjusted together for best readability of your website. To do so, find the options labeled "Text Font Size" and "Text Line Height". A value of "15px" for Font Size and "23px" for Line Height is a good starting point. You can check your site to decide if you need further adjustments.

Changing the Color of Headings

To set the color of your Headings, find the option labeled "Headings Color" and click the "..." to open the "Color Selection Dialog".

Changing the Font Family of Headings

You can change the Font Family of your headings by finding the option "Headings Font Family". You have the same robust options as the earlier "Font Family" setting here.

Changing the Font Size, Line Height, and Font Weight of Headings

It is possible to adjust the "Font Size", "Line Height", and "Weight"of your H1, H2, and H3 headings independent of each other. Just find the appropriate option such as "Heading H1 Font Size" to set it for that particular heading type.

How to Add Google Fonts

Google Fonts is a 100% free resource for great web-fonts. Find the one that you would like to implement by going to Google.com/Fonts and then Adding the Font to your "Collection" then clicking the "Use" button. Set your options on Step 1 and 2 then retrieve the code from Step 3.

The code looks like:

Copy this into your clipboard(Ctrl+C), now open up your theme then go to the "Plugin" tab. Click the "Add" button then on the window that popups up and set the "Position" to be "Body End". Paste (Ctrl + V) in your code in the main box labeled "Script". Adjust the other settings like Name, Version, Type, and Pages then click"OK" then"Apply" to Save.

How to Use the Google Fonts

You can use CSS to manually use your Font but it is recommended to do it via the "Colors" Tab of your theme. Scroll down to Typography, find the field you want to update then enter the name of the font like so: 'Roboto', 'sans-serif'. Be sure to use only 'Single Quotes and not " Double Quotes or it will not work. Do not remove the part where it says 'sans-serif' or 'serif' as this is the backup font style in case your font does not work. Click "Apply" to save your settings.