Learn how to quickly and easily add a Google Font to WordPress in under five minutes. Read on to discover how easy it is!

What are Google Fonts?

Google Fonts are an enormous collection of royalty-free fonts, provided by Google, that allow you to add custom font faces to your WordPress site.

What’s great about Google Fonts, is that they are hosted on Google’s servers, and so the time to load each font when a user lands on your page is significantly reduced.

A faster load time means a better SERP position and better SEO scores. You don’t want a slow loading site!

Browse the Google Fonts Collection

If you’ve already chosen a font that you like from Google Fonts, you can skip this step.

If not, navigate to Google Fonts and take your time choosing a font. There’s an impressive amount of them to choose from.

I use Lora on SitesMonster. It’s a serif font, and looks fantastic when used for headings!

Select a Google Font and Copy the Embed Code

Once you’ve chosen the perfect font for your site, left-click it.

You will now see the individual page for that font, allowing you to choose multiple styles of that font.

A font style is the different weight of a font. For example, thin, regular, or bold.

Click on the styles that you wish to incorporate into your site. A sidebar will appear from the right-hand side.

Click the Embed tab.

You will see two grey boxes of code that look similar to these:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

and…

font-family: 'Open Sans', sans-serif;

So what are they?

Well, the first is the code to actually add a Google Font to your WordPress site.

The second is the CSS code that tells the site which HTML element tags should use that specific font face.

Add the Google Font to WordPress Functions.php

So now that we’ve browsed the Google Fonts collection, selected a font, and copied the embed code, we can add it to our WordPress site.

There are two methods of adding a Google Font to WordPress

• Pasting the embed code directly into header.php head tags.
• En-queuing the script via the functions.php WordPress file.

The first method is easier, but is slower and therefore not recommended.

It’s always much better to do things inside of WordPress the way they were intended.

WordPress has a special theme specific file called functions.php that executes PHP code. We can use this file to add a Google Font to WordPress.

Open your functions.php file inside of your WordPress theme folder. If one doesn’t exist, you can create a new one at the root level of the theme folder.

Add the following code to functions.php:

<?php

  function main_script_create() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap', true );
  }

  add_action('wp_enqueue_scripts', 'main_script_create');

Now, copy only the URL of the Google Font that you want to add to your WordPress site.

This part:

https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap

and paste it where I have a similar looking URL in the example above. The example above is enqueuing the Lora font.

Modify Your WordPress Site’s CSS File

We’re almost at the finish line!

Open up your WordPress site’s main CSS file, or download a plugin that allows you to add additional CSS styles to your WordPress theme.

Remember that the second grey box filled with CSS code? Go back to that inside of Google Fonts and copy it to your clipboard.

h1 {
  font-family: 'Open Sans', sans-serif;
}

Now open up your WordPress site’s CSS file and add the example above to it, using the Google Font you chosen.

The example above tells your theme to use the Open Sans Google Font for all H1 HTML tags.