Add Google Fonts the Right Way

Google Fonts are a free resource on offer from Google, designed to add some flare to your WordPress website.

But, did you know that, if you don’t add them the right way, they can cause considerable problems with speed and performance on your website?

Google Fonts need to be added to your Theme so I’m going to show you how to do it without adversely affecting your website performance.

Find Your Font

First, you need to locate the Google Font that you want to use so go to fonts.google.com and choose which font you want. Have a good look through the library there are plenty to choose from and, when you’ve picked on, click the Quick-Use button.

A new page opens; go down the page until you see a box that has usage code in it – this is what you add to your website.

Note that there are three tabs – the first is the recommended way of adding the font, the second requires the use of the @import CSS method, while the third is the JS method.

I’m going to show you all three, along with their pros and cons so you can decide the best way to add them to your website.

Adding Google Fonts to Your WordPress Theme

Using @import CSS

Most people tend to use the first or second tab. By far the easiest way is to edit the style.css file for your theme with the code you got from the second tab, replacing xxx with the name of your font:

@import url(http://fonts.googleapis.com/css?family=xxx);
@import url(http://fonts.googleapis.com/css?family=xxx);

This is the easiest way, but it is not the best way simply because it will block parallel downloads – this means that the browser waits until the imported file has downloaded fully before it even begins to download the other content.

The result? A slowed-down website.

Using the Standard Method

The best way is to use the first tab, the standard and recommended way of adding Google Fonts because it uses a link and not import method.

All you need to do is copy the URL for the font or, if you are using more than one font, combine them with the | character between each one.

Then simply put that code into the header section of your theme. To do this, you will need to add the following code into the header.PHP file of your header, above the main stylesheet, replacing xxx with the font name:

‘<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=xxx|xxx” media=”screen”>

<link rel=”stylesheet” type=”text/css” href=”YOUR THEME STYLESHEET” media=”screen”>’

Now you can use it in the CSS file for your theme like this:

h1 {
font-family: xxx, Helvetica, Arial, serif;
}

Do NOT modify the parent files for your theme, especially if you have a theme framework. Any changes you make get overridden next time the framework is updated.

Enqueuing Google Fonts

The third way to add Google Font sis enqueue it in the functions.PHP file for your theme or within a plugin that is site-specific:

function wpb_add_google_fonts() {

wp_enqueue_style( ‘wpb-google-fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false );
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’ );

Obviously, replace the font link with the one for your chosen font

Using JavaScript

The JS method involves the need to copy the code from the JS tab and paste it into the header.PHP file, immediately following the ‘’ tag.

Do not load any fonts that you are not going to use or, if you do and you find that you don’t like them, get rid of them immediately. The more styles and fonts that you add, the slower your WordPress website will be.

Leave a Comment Below

>