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. GoogleFonts.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 this web site https://www.google.com/fonts

The web site currently has 700+ fonts for use. The left column of the site allows you to search or fine tune your font searches through filters and Script Types. 
 
The filters option 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.
 
The Script Option allows you to select different language types or character sets. The default is Latin (the base script for English, French, German etc) Some languages have special characters or accents which are not available in the Latin script. If your site is in another language ( Arabic, Greek, Thai etc ) then it is best to choose the correct script type. This will guarantee that your content is always displayed to your readers correctly.
 
The right side of the site is the Font Display Area. here you can preview and select your desired fonts.
 
Within the font display area you can preview all the font styles generated from your selected search filters. You can view the font as a word, Sentence, Paragraph or Poster.
 
Once you have the font you like, use the quick-use option which will take you to the next step (how to add it to your site) or you can add it to your collection (if using more than one font)
Your Collection will appear at the bottom of the Page to which you can review and edit the font families you have added to it before moving to the Next Step.
 
The Next Step

Once your font is selected you will then be shown variations of the font.

Step 1: Use the tick box to select the exact font variation or multiple styles.

Step 2: Should default to the character set. i.e. Latin for the Latin alphabet.

Step 3: This is the code and link that is needed to be added to your CMS Template.

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

<link href='https://fonts.googleapis.com/css?family=Fontname' rel='stylesheet' type='text/css'>

Step 4: Displays the Font Family needed to imput into our fonts area or your stylesheet (for advanced Users)

font-family: 'FontName', serif;

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

  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 select “DESIGN” then select "Fonts" from the Design Theme options (on the left of the dropdown menu)

The Fonts page consists of three area "Fonts", "Text Colours" and "Insert 3rd party font meta LINK tags here"

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.