How To Use Google Fonts In Your WordPress Theme

Google Fonts is one of the best resources out there for free web fonts and Google gives you a number of ways to import these into your website. Sadly, none of these include WordPress which means you have to rely on plugins to do the job for you or get your hands dirty with some WP code.

The good news is that you can install any font from the Google library on almost any WordPress theme without much hassle – which is exactly what we’re looking at today. Before we delve into any code we’ll cover a couple of plugins available, just in case you don’t fancy cracking open any functions.php files.

But first, I want to go over the benefits of using Google Fonts in your web projects – plus some drawbacks – so you know exactly what you’re installing on your themes.

The Good, The Bad And The Downright Ugly Google Web Fonts

As far as web fonts go, Google is one of the best options you have from a performance point of view. This is because of a lightweight construct and a caching system that means visitors don’t have to wait for Google Fonts to load if they have recently visited a site using the same font. This means popular fonts like Open Sans can boost the performance of your website by cutting down the loading time.

Another perk is that Google lets you download these fonts so you can use them in your mockups – something many other services don’t allow. And finally the platform is entirely free, without so much as a sign-up or email required to start using Google Fonts.

On the downside, the Google Fonts library still only consists of 650 ‘families’ and the standard is pretty low at times. Not only that, but many of the font families only have one style, which means you have to search like mad to find a decent font with regular, italic and bold styles. Aside from that there are the usual security concerns you expect from any Google product and you can expect to give away some more personal data when you install Google Fonts on your website.

How To Install Google Fonts With WordPress Plugins

Search for “google web fonts plugin” and the first two results are the WP Google Fonts plugin and Easy Google Web Fonts – still the best in the game. At this point I should mention that plugins aren’t the ideal solution for installing Google Fonts on your WordPress site – not only from a performance perspective, but also because plugins don’t allow you to select specific chunks of text in the way CSS styling does. That said, if you or your client is sure that the plugin option is the way to go I highly recommend you look at these two options.

WP Google Fonts

wp-google-fonts

This plugin comes as close as any of them to giving you the kind of style control you can achieve with HTML and CSS, allowing you to target specific elements like h1 headings, paragraphs and blockquotes. You also get a custom CSS option to further style individual fonts – making it a breeze to add and customise Google Fonts on your WordPress site.

Easy Google Fonts

easy-google-fonts

Easy Google Fonts lives up to its name and makes installing Google Fonts super easy for even the newest of WordPress beginners. You can use the live preview feature to view, test and optimise fonts without leaving your website, as well as create your own font rules without writing a single line of code.

The Right Way To Install Google Fonts In WordPress

At last we come to the nitty gritty option and it’s time to open up that functions.php file for a bit of custom coding. Before you can do that, however, you need to pick your font from the Google library – and for the sake of example, let’s go with the highly popular Open Sans.

You want to keep thing speedy and as web fonts slow your site down I normally go for no more than two web fonts with normal, italic and bold styles – but this is a decision you will have to make yourself. After you choose your styles Google will give you a code snippet and ours looks like this:

 

Plus we also get this CSS style:

 

Now it’s time to open up that functions.php file in wp-content/themes/yourtheme and at this point I should mention that before you customise anything on a WordPress theme you should look at how to create an edit child theme, if you haven’t done already. If this is the first change you are making to your child theme’s functions.php file you will find that there actually isn’t one, but all you need to do is create a new file, name it function.php and add this bit of code:

 

The key to this function is the ‘wp_enqueue_style’ command that tells WordPress to call the font style sheet in the header of each page. If you look carefully you will see I have removed the link href= and rel=’stylesheet’ type’text/css’ parts of code that Google gave us earlier and you will need to do the same if you want to add any other Google Fonts to your WordPress site.

All you need to do now is open up your main CSS file and get styling with Open Sans. The usual rules apply, so add the following code to your style sheet, save and click refresh:

 

As long as you have overridden the default style in your child theme correctly you should now have Open Sans normal as the main font for body text. Remember you also have italic and bold styles at your disposal, so you can apply the class .bold-text to any given content and set the following style:

 

And it really is as simple as that! If you are used to customising WordPress themes you won’t even blink and if this is your first time creating your own functions.php file, you couldn’t ask for an easier introduction.