How to add Google Fonts to a WordPress Website?


Having great typography is a very important element for any website, not only does it create great visual impact, it can also make the Website easier to use and aids accessibility. In the early days of the web you were limited to fonts that people had installed on their computer. Nowadays there is an endless choice of fonts that can be added to your website thanks to Webfont services, such as Google Fonts or Typekit. Let show you how to add Google Fonts to your WordPress website.

1. Choose your font?

The first step is to visit //www.google.com/fonts where you will be greeted with a list showing some of the most popular fonts on Google Fonts. Here is the hard bit, choosing your favourite as there are quite a large selection to choose from. We are going to use Indie Flower, 1 Style by Kimberly Geswein, which you can find in the first list you are greeted with or use the search function in the top left corner. Once you are happy with your choice, click add to collection. You can add other fonts to your collection by following the same process for each font. Each font will be added to your collection shown at the bottom of the page.

A screenshot of the Google Font preview.

2. Review your fonts.

The next step is followed by clicking the review link in the bottom right hand corner of the page, which will display a preview of the fonts you have picked. In this view you can amend the text, allowing you to customise this, which enables you to get a better sense of how the font will display with your own text. You can also see the font at different sizes to give you a good idea of how easy the text is to read. This can useful when picking fonts for a particular application such as logos or infographics.

3. Get The code.

The next step is now achieved by clicking the “use” link in the collections tab. You will be greeted with a screen with a list of the fonts you have chosen with the load time for each font. It is a good idea to consider the effect that adding these fonts to you site will have on the overall load of the website. These will be loaded from Google Servers, which will add an extra request to your page. The more fonts you add, the larger the page request will be.

A screenshot of the Google Font preview.

In step 3 of this page, you will be give a line of code which needs to be added to your theme. We are going to add this using the WordPress Enqueue system, now you could copy and paste this into your header.php file for simplicity but adding this via the enqueueing system will allow plugins to cache this for faster page load. Add the following code to your functions.php to enable the Google Fonts to be added to your page.


function myplugin_add_google_fonts(){
wp_enqueue_style(
'google-fonts',
'https://fonts.googleapis.com/css?family=Indie+Flower',
'1.0'
);
}
add_action('wp_enqueue_scripts', 'myplugin_add_google_fonts');

if you want to change the font used, then substitute the following, with the code provided by Google.


https://fonts.googleapis.com/css?family=Indie+Flower

A screenshot of the Google Fonts screen.

4. Edit your CSS file.

This step will depend on how your theme is organised, most themes come with a CSS folder within the WP-Content folder and will normally have a base file of default.css or style.css. Here is an example of how it may look.


body {
font-size: 14px;
font-family: 'Indie Flower', cursive;
}

You should then find that your body text should now show the new font, if you don’t see your text as the body style then you need to go back and check your code or CSS. If you want to change the fonts on your headings only then look for the CSS for the headers, which are normally shown as H1 – H6 depending on size.

You can amend your largest heading using the code below.


h1 {
font-family: 'Indie Flower', cursive;
}

I hope this helps you to add some extra style to your webpages, with a few simple lines of code. Let me know how you get on or if you need some help implementing his on your website leave your comment below.