How To Add Google Fonts To WordPress

Created by Haider Ali, Modified on Mon, 27 Oct at 4:30 AM by Haider Ali

Sometimes you visit a site and immediately see something you like. A sidebar, a theme, or a font and think to yourself "How do I get that on my site?". In this tutorial, I show you how to add Google fonts to WordPress with or without a plugin. Let's get started!

Step 1: Find the Google Font

All Google fonts are searchable at this URL:

https://fonts.google.com

On the top right-hand corner of the page, you will see a search bar.

Search for the font you want and it'll appear as a result dynamically. In this example, I'm searching for "Roboto Slab". When you identify your font, click the "plus" button as shown in the image above. This will add it to your collection. In our case, we want just one font.

Step 2: Get the Code to Insert into the Website

Once you've added the font, look at the bottom of the screen. You'll see a black bar showing the number of font families.

You can expand this bar by clicking anywhere inside it. Upon expansion, it will present you with two pieces of code.

These two pieces of code are the following:

A "link" tag that goes into the <head> part of WordPress

A style tag defining the style

Let's see how to insert both of these into WordPress.

Step 3: Insert the First Piece of Code into <head>

Normally, the regular way to do this is by using a plugin. The one called "Insert Headers and Footers" is a pretty useful one to have if you need more than just one snippet of code. You can also use it for Google Analytics or other other snippets.

But what if you don't want to use a plugin? Here are a few options:

Option 1: Check if your Theme Allows you to Add Scripts

Some themes have built-in options that allow you to add code to the header and footer. For example, the Genesis framework lets its users insert header and footer scripts.

If you're lucky enough to use a theme like this, great! Add the first piece of code into the header section. If not, use option 2.

Option 2: Add Code to WordPress

The second option is to add the code into the WordPress "functions.php" file. Or even better, add it in a custom plugin that you use for all kinds of code snippets. I highly recommend the second option over the first, for reasons mentioned in the linked tutorial.

But whatever method you use, here's the code you need to insert:

function add_font() {
    $font_script = <<<'EOD'
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
EOD;
    echo $font_script;
}
add_action('wp_head', 'add_font');

Replace the section in bold with the code you get on your screen. It's very important that you copy/paste this code exactly as shown. Don't indent the lines or anything. Just replace the line of code in bold with the one shown in Step 2 and you're done.

Step 4: Add the Second Piece of CSS Code

This step is easier than the one before it. Go to your WordPress dashboard and click "Appearance->Edit CSS" .

This will take you to your theme customization page where you can insert all the CSS you want. Now add the following:

p {
    font-family: 'Roboto Slab', serif;
}

As before, replace the code in bold with the second piece of code you got in Step 2. This CSS applies the font to all paragraphs. If you want to apply it to something else, you need to modify the CSS rule to make it happen.

Publish your changes and you're done! You will now have the appropriate Google font on your website!!