How to add Google fonts to your website

Picking fonts to use on your website can be hard enough, but once you’ve chosen Google Fonts, you may be left confused about how to use them on your site.

Google offers three options to make the fonts available on your site: Standard, @import and Javascript. For each one, I recommend creating a child theme if you haven’t done so already.

Option 1: Standard

Open your child theme’s header.php and add the code, which is similar to this:

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

between the <head> and </head> tags.

Option 2: @import

Open your child theme’s style.css and add the css code:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

immediately below the comments declaring what theme it is and such.

Option 3: Javascript

Open your child theme’s header.php and add the code between the <head> and </head> tags.

So, which is the best way to add Google Fonts to your site?

The standard way to include webfonts will have the least impact on the speed of your site. On slow connections though, visitors to your site may see the so-called Flash of Unstyled Text (FOUT), your text will show in a diffent font, then switch to your Google font once that has loaded.
The @import way will prevent that, but may slow down your site because it’ll wait for the font to load, then show the content.
The Javascript code is part of the WebFont Loader, which is a Javascript library developed by Google and Typekit that will give you more control over font loading. It’s unlikely you need the kind of control the Javascript code provides and it’s more complex than you’d probably like.

Standard is standard for a reason. It’s most likely the best way for you to include the fonts on your website. It’s better for visitors on slow connections to be able to at least see & read the content, than to have them wait longer until the included font has loaded.

That said, it’s always a good idea to optimize your site to make it load as fast as it possibly can. With regard to Google Fonts, this means:

1. Combine multiple fonts into one request.

You can do so with the pipe character “|”. So, instead of:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">

write:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">

2. Don’t ask for fonts you don’t use.

This may seem obvious, but if you don’t actually use a font, don’t include it. Some browsers only load the font files needed to render the text on the page, but others will load all fonts included, which will slow down your site.

Actually using the font on your site

So far, we’ve actually only added the fonts to be able to use them, but they won’t show up until you tell them where to show up.

Open your theme’s style.css and add the css code:

font-family: 'Open Sans', sans-serif;

to the elements you want to use the font for. This could be the body tag, if you want to use it on all or most text on your site:

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

Or if you want to use it just on headings, you can add it like this:

h1, h2, h3, h4, h5, h6 {
 font-family: 'Open Sans', sans-serif;
}

Save the files you’ve edited and upload to your site.

You may also like to use your chosen Google fonts in your images, to make them match the rest of your site.

Did this help you or do you have questions? Leave a comment.