[Skip to content]

Search our Site
Easysite Resource Centre
How to use Google Fonts

How to use Google Fonts

This short guide will take you through the simple process of adding google fonts to your website

Go to www.google.com/fonts and find the required font family. Select 'Quick use' (icon highlighted in the image below).

google-fonts-pic

In the next screen you can select styles and character sets you want to be available to your website,

google-font-selection

You then have the option of importing the font into your website in three different ways. You can either use the standard link method, @import or Javascript. Add the relevant code snippet into the head section of your html, using the DocumentHeader.aspx page control:

loading-google-fonts

The css can then be added wherever it's required in the styles. For example, to change the font across the whole site, add the following to lib.generics.css in the master style:

body { font-family: 'Open Sans', sans-serif, verdana; }

Other font libraries can be used in the same way. Essentially you just need to generate the link on the font website, add that to DocumentHeader.ascx, then specify the css as required.