How to Add Google Fonts to WordPress With and Without Using a Plugin

Are you tired of using the regular fonts and wish to use Google fonts on your WordPress website?

You’re not alone in wanting to switch over to Google fonts. After all, when there are more than 1200 beautiful font families to choose from, then why settle for the plain old vanilla fonts?

Many WordPress themes like GeneratePress include an extensive list of Google fonts in the theme customizer that you can select with a single mouse click. However, whether your theme provides built-in Google fonts or not, these fonts are loaded from the Google fonts website.

A downside of loading font files from external sources is the negative impact on page speed since your server has to make additional HTTP requests to 3rd party sites. There is a certain delay involved between making calls to external sites that host the font files and receiving the requested information from the external site.

The solution is to add Google fonts to your WordPress site and use them locally that will avoid the round-tripping that I explained earlier.

In this tutorial, you will learn how to add Google fonts to your website with and without using a plugin. This way, you can use your favorite Google font on your website without compromising on page speed.

Let’s get going.

Add Google fonts using a plugin

The easiest way to add Google fonts to your WordPress website is by using a plugin. This method is ideal for those who do not want to get their hands dirty with CSS and PHP code and want to add and use google fonts in their theme in a painless manner.

We will be using the Easy Google Fonts plugin for this purpose. After activating the plugin, navigate to the Customizer panel under the Appearance menu.

You will notice that a new Typography tab is added by the plugin.

Voila! You now have complete font control settings for your WordPress theme at your fingertips.

For the purpose of this tutorial, I used a theme that did not offer a typography control panel in the Customizer. But the plugin added one anyway, which is what makes the Easy Google Fonts plugin such a joy to use.

Also, you can now not just manage the display of individual fonts but also control their styling like color, size, spacing, and line-height as well.

You have seen how easy it was to add Google fonts to your theme customizer using a plugin. But if you don’t want to add another plugin to your site, I have you covered here as well.

Add Google fonts without a plugin

Here I will walk you through the manual method of adding Google fonts to your website.

Note: This method works with any external font. The only thing is you should have access to the CSS files associated with that non-Google font.

Step 1: Pick the Google or web font to add

Before you add a Google or web font to your WordPress site, you need to select a font. To select a font, head over to this Google font picker tool.

You can search the entire Google font database from the font picker panel on the left.

After selecting the Google font to add to your WordPress theme, select the variants that you would be using. By default, the regular font type is pre-selected. You should select only those variants that you will be using since the more font variants you use, the heavier the page will become.

Step 2: Download the font files

Skip the Copy CSS step given on that page for now and skip to step 4 to download the font file in ZIP format to your computer.

ad

Step 3: Upload the font files to your website

Now that you have downloaded the Google font to your PC, it’s time to upload it to your WordPress website.

So, head over to the file manager in your hosting account. If for some reason, you don’t have access to the file manager, you can use a free FTP tool like Filezilla to connect to your website.

Next, in the wp-content directory of your WordPress installation, create a folder named ‘fonts‘ (or any other name) if it’s not already present. Within the fonts folder, create a sub-folder for each of your fonts.

Let’s say, you wish to upload the Open Sans font files, so create a sub-folder named open-sans, and so on.

Within the newly created sub-folder upload the font files in the zip format that you downloaded and extract the font files. The extracted files should look something like this:

If for some reason, you’re unable to unzip the file after uploading, you can first extract the files on your PC and then directly upload the font files in the sub-folder that you just created.

Next, we need to add the CSS of the Google fonts to our WordPress theme. So, head back to the font picker tool and add the path of the font files (excluding the file names) that you uploaded to your WordPress installation.

The path should be something like this based on the above example: https://yoursite.com/wp-content/fonts/open-sans/

Remember, we don’t need the file name at the end, we only need the path of the folder where the font files are uploaded.

Add this path to the Customize folder prefix box on the font picker tool page.

Take note of the font-family name. We will be needing it in just a bit.

Now, select and copy the CSS on the page. We need to add this custom CSS to our WordPress theme.

There are 3 ways to add custom CSS to WordPress:

1. Theme Customizer: This is the easiest way to add custom CSS. Head over to the Customizer under Appearance and paste the CSS in the Additonal CSS tab.
2. Using a plugin: Install the Simple CSS plugin and paste the copied CSS.
3. Using a child theme: You can create a child theme in WordPress in under 5 minutes and paste the copied CSS in the style.css file of the child theme under Appearance > Theme Editor.

Step 4. Using the Google font files on your website

You have now successfully added the Google font files to your theme. Now, you need to reference it using basic CSS. This CSS can be added in one of the 3 ways that I explained above.

Example of referencing the Open Sans Google font:

h2 {
font-family: Open Sans, sans-serif;
font-style: normal;
font-weight: 400;
}

Note: The font name in the property ‘font-family:’ should exactly match the name as it appears in the CSS that you copied on the font picker tool page. The font-weight property will depend on the font weights that you have uploaded to your website.

If you’re using a theme like GeneratePress, you can easily add the Google font to the theme customizer typography panel by adding the following PHP filter to your child theme‘s functions.php file:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';

    return $fonts;
} );

Replace the font name from Open Sans with your chosen font accordingly.

To add multiple font files, use the below PHP filter:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';
    $fonts[] = 'Nunito';

    return $fonts;
} );

The Google font(s) will now show up under the System Stack panel in the GeneratePress typography options menu.

It’s even easier to use Google fonts in the Astra theme. You don’t need to upload any external Google fonts to the Astra theme.

Simply head over to the Performance tab in the Astra theme Customizer and activate the Load Google Fonts Locally setting.

That’s it. Now when you select any Google font, it will be automatically added to the Astra theme and loaded locally without needing to lift a finger.

Summary and further optimization

You have seen how easy it was to add and use Google fonts locally with and without using a plugin. This will surely bring down your page load time. For added optimization, I suggest that you should preload the fonts that you have just added.

Preloading directs the browser to load the local font file in advance instead of waiting for page load. Fortunately, it’s child’s play to preload Google fonts using the WP Rocket plugin. Enjoy the added speed boost for your WordPress website.

I hope you found this tutorial on adding Google fonts to your WordPress theme easy to follow. I would love to read your feedback in the comments below.