How to add a Google font to WordPress

By | March 21, 2015

Introduction

Using special fonts on your WordPress website can make it look a lot more professional. In a previous article, I wrote about changing the font you’re using on your WordPress website by either changing the stylesheet, or using HTML in posts or pages. You can read this article here: change the font in WordPress. However, more unusual fonts are not supported by default. This is what you could use Google Fonts for.

Google Fonts is a library of over 600 free to use webfonts. Here you can find fonts, and copy a snippet of code to WordPress, that allows your website to use those fonts. This means your website communicates with Google to make use of the specific font.

Note: using fonts from Google Fonts slows your website down by a few milliseconds. As long as you’re not using too many different Google fonts, this is usually not a problem.

Examples of some of the more interesting fonts, see the picture below:

google-font-demos

Demo of some eccentric Google Fonts.

 

Full video tutorial:

Finding a font and the code snippet

Go to Google Fonts. Here you can browse through 600+ open source fonts. I like browsing through the fonts using the the ‘Poster’ tab, as this tab displays the most fonts on a page. Click ‘Poster’ if you want to use this display mode.

Google-fonts

Find a font you want to use, and click ‘Add to collection’. You can add multiple fonts to your collection, to install them all at once. In this example I’m just going to install one font; the ‘Lobster’ font.

Google-fonts-add-to-collection

Once you’ve selected all the fonts you want to use on your WordPress website, click ‘Use’, down in the the browser window.

Google-fonts-use

You’ll now be taken to a page where you can copy the code. You need this code to add the font to to WordPress. Here you can also select additional font styles, and characters sets.

Scroll down, select the code, and copy it.

Google-fonts-copy-the-code

Installing the font to WordPress

Go to your WordPress website, and click ‘Appearance’, and then ‘Editor’. Here, select ‘Header’ to open the header.php file.

WordPress-paste-google-font-code-in-the-header

In the header.php file, find the start of the head, which is indicated by the <head> tag. Paste your code right after this tag. Click ‘Update file’ to save the changes to your header.php file.

Done! You can now use this font in WordPress. Not sure how? See how to change the font in WordPress – Font type, size and color.

8 thoughts on “How to add a Google font to WordPress

  1. Shirley

    I loved this article and I read it at the right time for me, as I was needing this information today. Thanks so much. Shirley

    Reply
  2. michael

    great load of information, I feel it’s important to have a variety of different fonts to help make your posts and pages stand out, might try some of my own in the near future.

    Reply
    1. GuidoGuido Post author

      Thanks Michael! I agree, you can really use fonts to your advantage on posts and pages to attract attention. Also, on another sites of mine, I’m using Google Fonts for things like headers, because it just fits the design better than the original.

      Reply
  3. emily

    hi Guido
    thanks so much for this info!! I did not know that! I love some of the fonts! They are just awesome and way more original that the standard font. When you have a website, it is always best to stand out and do something that is not expected. Those fonts would do it :)

    Reply
    1. GuidoGuido Post author

      You’re welcome, Emily! Using a special looking font will definitely help you stand out.

      Reply
  4. Laura

    Thank you for this good article. An easy-to-follow explanation. Like an Idiot’s Bible of Google Fonts!
    I saved the article, favorited the site and wait for more interesting things. :)

    Laura

    Reply
    1. GuidoGuido Post author

      Thanks Laura! It’s always my intention to write as fool-proof as possible, so it’s good to hear that it’s working!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*