Font Management
Updated over a week ago
As part of our push to give you more options to personalise your website through your CMS, you will now be able to apply custom styles and front to your dynamic website, to keep more in line with your branding!
Note - This functionality is currently only available for the Tetra and Angelgish Template.
Overview
The font management page is available for superusers and marketing users only. To navigate to this page, go to website > web settings > font.
Basic / Advanced
You have the option to access a simplified version of this page by selecting the basic toggle. Alternatively, you can select the advanced toggle to apply more specific settings and values to your font and styling.
Switching between pages
When you make a change to your advanced settings and hit the save button, you will no longer be able to return to the basic settings page. You will see a warning message appear.
To return to the basic settings page, you will need to reset your styles to the default. You can do this by clicking on the link at the top of the page, or clicking 'reset theme styles' at the bottom of the page.
Basic Settings
Font
The basic settings will give you the ability to select a font family from the drop-down, these include:
Arial
Calibri
Comic Sans MS
Courier New
Times New Roman
Verdana
Georgia
Palatino Linotype
Garamond
Trebuchet MS
Custom*
Custom Font
Selecting the custom option will trigger a font URL and name field to appear.
You can import a custom font from Google or Adobe fonts.
Google Font
Navigate to the google font page by clicking here.
Search and select a font you wish to use on your website.
Scroll down to the styles section of this page and click (+) on the style you wish to use.
This will trigger a side panel to appear called 'Selected Family'.
Within the 'use on web' section, click '@Import'.
Highlight the URL from the style field to match the below format, and copy and paste this in to your custom URL field in the CMS.
Highlight the font name from the CSS rules field to match the below format, and copy and paste this into your custom font name field in the CMS.
'Roboto', sans-serif
Base Size
You will be required to select a base size for your font, this will be the core value that drives your font sizes.
Changing this will affect the font size within the site. Changing this can impact all heading and paragraph font sizes, depending on which units are used.
You can select from the following options:
Tiny
Small
Normal
Big
Huge
Styles
You can click the edit button to access the size and weight values for your body and header styles.
Size
You can select the values and units for your font size.
The units available to use are listed below:
rem
em
%
px
Weight
You have the option to choose if your font will be bold or standard.
Normal = 400 weight
Bold = 700 weight
Advanced Settings
Font
The basic settings will give you the ability to select a font family from the drop-down, these include:
Arial
Calibri
Comic Sans MS
Courier New
Times New Roman
Verdana
Georgia
Palatino latui Linotype
Garamond
Trebuchet MS
Custom*
Custom Font
Selecting the custom option will trigger a font URL and name field to appear.
You can import a custom font from Google or Adobe fonts.
Google Font
Navigate to the google font page by clicking here.
Search and select a font you wish to use on your website.
Scroll down to the styles section of this page and click (+) on the style you wish to use.
This will trigger a side panel to appear called 'Selected Family'.
Within the 'use on web' section, click '@Import'.
Highlight the URL from the style field to match the below format, and copy and paste this into your custom URL field in the CMS.
Highlight the font name from the CSS rules field to match the below format, and copy and paste this into your custom font name field in the CMS.
Base Size
You will be required to select a base size for your font, this will be the core value that drives your font sizes.
Changing this will affect the font size within the site. Changing this can impact all heading and paragraph font sizes, depending on which units are used.
You can drive this by adding custom values and selecting a unit.
Styles
You can click the edit button to access the size and weight values for your body and header styles.
Size
You can select the values and units for your font size.
The units available to use are listed below:
rem
em
%
px
Weight
You have the option to choose if your font will be bold or standard.
Normal = 400 weight
Bold = 700 weight
Custom = Custom Value
Line Height
You can customise the line height between each of your headers and your body text.
Margin Top and Bottom
You can select the size of the margin for the top and the bottom of your text. You can select the units for these values from the below:
rem
em
%
px
Preview and Save
You can preview your font styles before you save any changes. Click the preview button at the bottom of the page to get a pop-up preview of your website. You can navigate around via your menu and see how your new font styles look with your content!
