Software Tutorials

Cate

How to: Install Google Fonts on Your Website

Wednesday, 2 September 2015  | 

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

On the left hand side 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.

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

Alternatively use the sliders on the different filters underneath. 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 last drop down, called Script, 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, Greek and Hebrew.

Viewing Your Fonts

Google Fonts Preview

At the top you'll see a Preview Text field, this is the text each font will set in to preview how it looks. By default this is set to 'Grumpy wizards make toxic brew for the evil Queen and Jack.' This is because this sentence contains every letter within the alphabet. However, you can change this text to show something relevant to you, such as your company name if you're looking for a logo font. You can also set the pixel size of the font using the Size drop down if you wish.

Google Fonts One Word Preview

Above this is different ways to display your text, either just the first word, the entire sentence or a complete paragraph. This helps when you are looking for different fonts for different areas of your site. So, you may just display one word for your logo font, the sentence for any title fonts and the paragraph for the general content font.

The poster view shows each font in a poster format using the font name as its display text. This is a useful tool if you just want to browse through the fonts quickly to see which ones take your fancy. A good way to do this is by setting the Sort option to Trending, as this often shows up some rather unusual and interesting fonts you may never have heard of.

Choosing Your Font

Google Fonts Collection

You may spot the one you want to use fairly quickly and be dead set on it from the start. However, you may find you like a few and want to remember which ones they are as you go through them all. The best way to do this is to click on the Add to Collection button if you spot one you like. This will place them into a holding area at the bottom of the page where you can view them later.

Google Fonts Review

Once you're ready to compare them, and choose the one you want to use, click on the Review button on the right hand side of the collection area. On the review page you will see each font set side by side for easy viewing. At the top of the page there are several viewing options much like on the main fonts page, however, one useful tool to point out is the Test Drive option. This allows you to see the fonts as they would appear on a webpage in their various positions such as heading, sub-heading and content.

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 Quick Use icon on the right hand side of the font display text.

Google Fonts Quick Use

Alternatively, if you are within the Review page you can tick the Use This Style option next to the particular font(s) you want to use and then click on the Use button within the Collection bar at the bottom.

Google Fonts Use From Review Page

When you get to the last page you will see the different style options available for your chosen fonts(s) in stage 1. If you have gone through the review page it will show all of the fonts here but with just the one you selected ticked. It is best to only select the styles you actually plan to use, usually normal, bold and italic, otherwise the more styles you choose will mean the font will load slower on your website.

Choose font styles

There's normally no need to adjust the settings on stage 2, so leave this as it is. In stage 3 you will see the piece of code that needs to be placed within the <head> section of your website's code. You will need to highlight this code and copy it.

Add link code to head section

It is very simple to add this code to your Bluepark website. In the admin console just go to Site > Template Manager > your default template > Site Tab. Scroll down to the Head Section (Developers) field and paste the code in. 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.

Head section on Bluepark websites

Lastly, in section 4 you will see the font family reference which needs to be placed wherever you want this font to appear. Again, you will need to highlight and copy this. For your Bluepark template you will only need to copy the font names at the end.

Font family code

In your template you will need to add this to 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 names into the Main Font field in Columns > Centre, Columns > Left and Columns > Right.

Add the main font to the centre column

If you want to use multiple Google fonts on your site, make sure you tick all the relevant styles in the last step as this will create one line of code for the <head> section. Then add the relevant font-family names to the particular field where you want it to show within the template.

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