Adding New Fonts

The October 2021 release will be supplied with a number of pre-loaded fonts - you’ll be able to see these in Dashboard Configuration>Settings>General Settings. If you need to add any additional fonts you can add them in the same area of the system by following the instructions listed below:

To add a new font, click the add button in the ‘Additional Fonts’ section.

To add a new font, you will need to specify the Font Family and Font URL. The instructions below show how to add a font from Google fonts.

In Google Fonts, select the font that you want to use by clicking on it and then click ‘Select the style’.

You will now need to copy the URL for the font (highlighted in the following screenshot).

Paste the URL into the ‘Custom Font URL’ field.

Copy the Font Family from the ‘CSS rules to specify families’ section.

Paste this into the ‘Font Family’ field. If you’ve copied the details correctly, you should see a preview of the selected font in the ‘Preview’ field.

Add a Label for the font into the ‘Label’ field and click the ‘Save’ icon.

If your chosen font has multiple options, ensure that you click ‘Select this style’ for all options if you want to be able to use Bold and Italic styles for example.

In the following screenshot, the chosen font has regular, italic, bold and bold italic versions.

Fonts:

• Fonts added to the Settings screen are globally available and are also available for use with text editing

• Fonts defined in themes (previous implementation), which were used to allow a particular theme to have additional fonts is now unnecessary

• Generally it’s advisable to provide a fall back font when providing a font. When Internet access is not available, the fall back font will then be used

Fall back fonts

To ensure that you have a fall back font specified, please ensure that you copy everything in the ‘CSS rules to specify families’ section when choosing a new font. This information is then copied into the ‘Font Family’ column in Dashboard Configuration> Settings. In the following example, if the font ‘Ephesis’ was not available due to a lack of internet connection, cursive would be used in it’s place. In the following screenshot, we can see that when adding the ‘Ephesis’ font we’ve selected everything from the starting single quote to the end of the text ‘cursive’.

We can see how this looks in Dashboard Configuration>Settings in the following screenshot. The main font is specified in double quotes e.g. “Ephesis” and anything after the comma is the fall back font e.g. cursive.

New fonts will always appear at the bottom of the list of fonts. To sort them into order, click the ‘Sort Alphabetically’ icon.