Cate

How to: Install Google Fonts on Your Website

Wednesday, 2 September 2015  |  Cate

How to Install Google Fonts

Before 2010 if you wanted to add a non-standard font to your website you would've had to install the font's files on your website's servers and linked to them using complicated code within the CSS to make sure it showed correctly. For the average online shop owner this was something that was very daunting, if not impossible, and so many sites on the internet all used the same fonts, known as web-safe fonts.

Nowadays you don't have to worry about complicated code or placing files on servers you might not be able to access thanks to Google Fonts. This free, simple and straightforward service allows you to add all sorts of unusual fonts to your website, giving you freedom to create a truly unique design for your brand.

Finding Your Fonts

Once you get to Google Fonts you'll be confronted with a long visual list of all the different fonts on offer. This initially can be rather daunting, however, if you have an idea of what you're looking there are tools to help you narrow down to what you're after.

Google Fonts

At the top left there is a search box and several filtering sections. If you know the name of the font you want to add to your site just search for it straight away. It may not be available as a Google Font but it's always worth checking.

Google Fonts - Categories Filter

If you're just browsing to find a font you like think about the different features of it. Use the categories drop down to view the different fonts on offer for the following different typefaces.

Serif - more traditional fonts with a small line attached to the end of each stroke in a letter
Sans Serif - modern, simple fonts without any small lines attached to the end of each stroke in a letter
Display - fonts that work best when they are used larger, great for logos
Handwriting - fonts that are often very stylised and look like they are handwritten
Monospace - uniform fonts where the letters and characters each occupy the same amount of horizontal space

Google Fonts - Properties Filter

Alternatively use the sliders on the Font Properties drop-down. Think about whether you want fat or thin letters? Should they be slanted? How compressed together do you want them? Experiment with each one to see what fonts are shown.

The middle drop down, called Language, defines what language characters are used. By default this is set to Latin, which is the standard script for most languages. However, there are specific ones if needed such as Arabic, Chinese, Greek and Hebrew.

Viewing Your Fonts

Google Fonts Preview

Above the filters you will see a drop-down called Sentence. In here you can select what shows in each of the font previews below. This allows you to view a simple sentence, the entire alphabet, as a full paragraph,  in numerals and a further option called Custom. This last option allows you to add in your own text in the Type Something field to the right. Lastly, you can set the pixel size of the font using the Size drop down if you wish.

Choosing Your Font

Google Fonts font options

As you browse through the fonts, hover over one that you like and you will see the Sentence and Size options appear underneath the font name, along with a couple of other options. The middle option, which by default is set to Regular, allows you to see the font's different styles, such Light, Semi-Bold and Bold Italic. What is available will vary for different fonts.

At the bottom right of each font, when you hover over them, there will be a See Specimen option. When you click on this you will find more information about the font, such as what each character looks like, what styles are available, who designed it and how popular it is.

Google Fonts popular pairings

The most useful feature on this page is the Popular Pairings section at the bottom left. This shows you different fonts that works well with the font you're looking at. This is helpful when considering different sections of your website.

A general rule of thumb in website design is to one font for titles and call-to-actions and another for written content. So, in the example above, the chosen font of Roboto would be used for the paragraph as it's clean and easy to read in a smaller size, but the paired font of Inria Serif would be used for titles and call-to-actions because the font size is usually larger and the text is usually kept short, so fancier fonts can work well.

Installing Your Font

Once you've finally chosen which font(s) you want to use you'll need to grab a couple of pieces of code. To do this via the original font list, just click on the Plus icon on the top right of the font display text. You will know it's been added because the icon will turn to a Minus.

Google Fonts Quick Use

Alternatively, if you are within the Specimen page you can click on the Plus icon(s) next to the particular font(s) you want to use in the Popular Pairings section.

Google Fonts selected fonts

As you add fonts, you will see a black bar flash in the bottom right corner of the screen. Once you're done, click on the black bar to reveal the code and more information that you will need. The only settings you need to change in here is within the Customize tab. In here you can select which font styles you want to use for each font.

Take note of the Load Time shown on the right in green, orange or red. This informs you of how the font choices will impact on your website's load speed. The more fonts and font styles you add, the longer they will take to load. So, only select the fonts and styles you're actually going to use to ensure the Load Time never goes to the red stage, as this will have a big impact.

Add link code to head section

Once you're done setting your font(s), highlight and copy the code under the Embed Code section and paste it into the <head> section of your template.

Head section on Bluepark websites

To do this go to Design/Layout > Template Manager and click on the Advanced Editor button underneath the template preview. In the Pages tab, scroll down to the Head Section field, click the Edit button next to it and paste the code in. Don't remove or paste over any of the code that may already be in there. Remember to save and confirm.

You will need to repeat this on each template, if for any reason you are using multiple templates on your site.

Font family code

Lastly, you will need to copy the font family reference underneath the Specify in CSS section in Google Fonts and paste it wherever you want this font to appear in the template. You will only need to highlight and copy the actual font-family name, as highlighted above, and not the text that says 'font-family:'.

Add the main font to the centre column

In the Advanced Editor of your template you will need to paste this font name into the section(s) you want this font to appear. So, for instance, if you want your main content text to use this font then paste the font name into the Main Font field in Columns > Centre, Columns > Left and Columns > Right.

For more advanced users, if you want to refer to the font within the Additional CSS field in the template you will need the full font-family text as shown in the Specify in CSS section on Google Fonts.