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.

    1. https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap

  • 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.

    1. '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.

    1. https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap

  • 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!

Did this answer your question?