Embedding Web Fonts

Many of you are aware of the font selections available from the CMS system. However traditionally these have been restrained by generic font families that are available on the viewers computer. Now there is the ability to use any font you like on your website by linking to online font depositories such as Google Fonts!.

On their site Google provide a demonstration video on how to apply one of the fonts from their font library to a website.  https://fonts.google.com/ However there are a few differences when using our system so I will explain the process in full.

Adding Google Fonts to your website.

First of all go to the web site https://fonts.google.com/

The web site currently has 700+ fonts for use. The site allows you to search or fine tune your font searches through filters and Script Types. 

Font filter options

The categories dropdown identifies the font type your searching (i.e. Serif, San Serif, Display, Handwritten and Monospace) or you can leave the default option "All Categories" for a wider search. The next filter allows you to adjust the thickness, slant and width of available fonts via slide bars -  play around with these filters to find the appropriate font for your website.
 
You can type some text into the TYPE SOMETHING field to preview how that text would look, or leave as-is.
 
Once you have found a font you like you can click into the font preview to reveal the different font styles and weights you can add via a + SELECT THIS STYLE link next to each option.
Any options selected will be added to a SELECTED FAMILIES sidebar.
If you want a different font for your headings you can go back and select a different font family and select the relevant style.
 

The Next Step

Once your font is selected you will then be shown embed codes in the Selected Families Sidebar

Use on the web: This is the code and link that is needed to be added to your CMS Template.

There are two options available the simplest of these is the standard option. Which provides a link to your selected font family as shown below

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap" rel="stylesheet">


CSS rules to specify families: Displays the Font Family needed to input into our fonts area or your stylesheet (for advanced Users)

font-family: 'FontName', serif;

You need to copy the code from Step 1: and the font-family from Step 2: exactly and paste them into your website template. In our system there are several ways to do this. The best option is the following:

Adding the code to your website.

  1. Log in to your account.
  2. Select the site you are working on (if you have more than one)
  3. In the top menu click the DESIGN button then select "Set Fonts and text colours" from the Colours, Fonts and Styling section
  4. On the following page find the Font Family / Font Type / Font Sizing section

Firstly: we need to add the google code from Step 3: which will tell your template where to find the font.

Go to "Insert 3rd party font meta LINK tags here". Click Edit to the right. in the Pop Up window paste the code you copied from google here. "Save Changes" and close the pop up window.

Secondly: we need to tell the system when to use the font.

In the Fonts section you have two options Font(General) and Font(Heading). Simply add the font family name from Step 4: to this area.

Save, Publish then preview your site. You may need to also refresh your browser to see the changes. CTRL + F5 You should now see that all you headings on your website have changed to your new font.

 

For Advanced users editing Stylesheets

To use the selected font in your site you need to set up styles within the stylesheet. The simplest style to set up is your web pages headings which are dictated by a h1 tag.

Access the stylesheet by selecting Design in the Top menu of the CMS. In the drop down menu you will find “Custom CSS Style Sheets” under the “Advanced Users” area. From the list of possible stylesheets select the “GLOBAL STYLE SHEET”

In the Global Stylesheet area find the current h1 {} or if there are no styles applied to your template type the following code into the editor.

h1 {}

Then between the brackets paste the code copied from the google site.

h1 {

font-family: 'FontName', serif;

}

Save, Publish then preview your site. You may need to also refresh your browser to see the changes. CTRL + F5 You should now see that all you headings on your website have changed to your new font.