Freeola posted on Tuesday September 20th, 2016

Following on from our previous articles about using fonts on your website and the update to the Google Fonts directory, this article will deal with adding and using web fonts on your website.

In this age of the web, many would argue that the basic selection of web safe fonts is somewhat limited when it comes to giving your website a voice. Fortunately, there are alternative methods for including other fonts on your website and ensuring that they can be viewed across a wide range of devices. This means you don't have to worry about fonts falling back if your selected font is not installed on a user's device. If you are looking to use a font on your website which is more unique then the safest way to do this would be by using a web font.

A web font is a font which is not stored locally on your computer but is remotely accessed by your web browser. Using a web font is a modern way of avoiding the standard and basic web safe fonts. You could choose virtually any font in the world to be on your website thanks to web fonts. Some websites let you convert standard fonts which are installed on your computer into web fonts, providing you have the rights to do so. Other sites let you simply copy a few lines of code to add to your website and access the font from their servers.

The quickest and easiest way to use a web font is to browse online for a free to use web font. A good website to look for web fonts is Google Fonts, which has recently had a revamp making it even easier to use. Did we mentions it's also completely free?!

Google Fonts Website

Google Fonts has over 800 web fonts to choose from, with a range of different weights for each font and special characters. Installing them is easy! Just find a font you like then click the plus icon in the top right next to your chosen font, you will be able to see the font families you have selected by clicking the black bar at the bottom of the window. From there you will have the ability to select how many font weights you want to install on your website. The less font weights you install the quicker the loading time for your site. You can do this under the Customise tab.

Choosing the font weights which you would like to install on your website

Once you've chosen which font weights you need for your site, simply navigate back to the Embed tab where you will be shown the code which is required on your website to activate the web font and how to refer to the font when coding is CSS.

The code needed to add our chosen web font to our site

In the <head> of your site paste in the top snippet of code in. In this case this is <link href=",400i,700, 700i" rel="stylesheet">. By pasting this into the <head> you are essentially installing the font onto your website and are allowing any modern browser to easily access your chosen font and display it correctly.

If we were creating a new site from scratch with inline styling then this is what our code should look like at the moment:

<!DOCTYPE html>
700,700i" rel="stylesheet">
body {
font-family: 'Open Sans', sansserif;

Most modern browsers support web fonts but if a user has not updated their browser for a very long time their browser may not be able to display the web font so it is always wise to have a web safe font as a backup just incase. Open Sans is a clean, sans-serif font so we will use Arial as our backup as that too is a simple sans-serif web safe font.

body {
font-family:‘Open Sans’, Arial, sans-serif;

It is always a good idea just for an extra layer of security to put 'sans-serif' at the end incase for some reason somebody is viewing the website on a browser which doesn't support web fonts or have Arial installed, although this is virtually impossible.

Let us know how you get on adding web fonts to your site in the comments section below. We'd love to here from you! Keep your eyes peeled for new articles about typography on the web right here at the Freeola Blog.

Article Comments (0)
There are currently no comments on this article.

You'll need a Nickname to leave comments.


Thank you for your comment. Your comment has now been successfully added to this post.