This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

How to Use Google Fonts With WordPress?

Updated on  31st May

7 Min Read
Reading Time: 7 minutes

One of the simplest (and best) things you can do for your WordPress website’s design is change the default fonts your theme or page builder offers.

Although there are a number of typography options available to you, the easiest way to get access to hundreds of professional-looking fonts (free of charge) is by using Google Fonts with your WordPress website.

Google-Fonts-in-Wordpress

In this post, we’ll walk you through step by step instructions to learn how to add WordPress google fonts with your website manually and by using the Easy Google Fonts plugin. But before we begin, let’s quickly take a look at what are Google Fonts and the key advantages of using them on your WordPress website.

What Are Google Fonts and Why Should You Use Them?

Google Fonts is a library of libre licensed fonts through which you get access to hundreds (877 to be exact) of web optimized fonts – for free. It features an interactive web directory that allows you to search for specific types of fonts and test them out in your web browser.

google fonts

Google Fonts in WordPress bring a number of indisputable benefits to the table. They’re free to use (even for commercial projects), pre-hosted (so they won’t take up your server’s resources), and downloadable (you can use them in print).

So, if you’re ready to revamp your site’s typography with easy to use web fonts then all that’s left to do is find the right fonts and use them with your WordPress website.

How to Add Google Fonts to WordPress Manually

Google Fonts takes most of the heavy-lifting out of embedding font families into your website. In this section, we’ll walk you through step by step instructions to manually install Google Fonts to your WordPress website.

Step 1: Find the Font You Want to Add to Your Website

To get started, browse the Google Fonts directory and choose the font you want to use on your WordPress website. If you already have a specific typeface in mind, you can simply search for it using the search box in the right sidebar.

find right font

You can also filter fonts by category, languages, number of styles, thickness, slant, and width or sort them by the date they were added, alphabetically, trending, or by popularity.

  • These are fonts that have small lines attached to the end of letter strokes e.g. Times New Roman and Courier.
  • Sans-Serif. Fonts that don’t have the little lines at the end of letter strokes are sans-serif fonts e.g. Helvetica and Roboto.
  • Display fonts are primarily used for large text e.g. titles.
  • Fonts that have a hand-written look to them e.g. Pacifico.
  • Fonts that have exactly the same spacing to all characters e.g. Source Code Pro.

interactive display

One of the best things about Google Fonts’ interactive directory is that you can quickly preview the fonts you’re interested in. All you have to do is click into the field box of the font and type something in it.

For the purpose of this tutorial, we’ll go with Open Sans.

open sans

Step 2: Add the Font to Your Selection

Now that we know which font we’re going with, let’s add it to our selection. You can do this by clicking on the plus sign (+) in the upper right corner of the font family box.

add font selection

You can add as many font families as you’d like to your selection. Once you’re all set, click the black X Family Selected bar at the bottom of the screen to view your selection.

Step 3: Customize the Font

The X Family Selected bar opens up a window that has two tabs – Embed and Customize. Before we embed the font family into our WordPress website, we’ll take a moment to customize it a bit.

customize font

From the Customize screen, tick the boxes for the styles and languages that you’d like to be able to use on your website.

Keep in mind that the more font styles and languages you select, the longer it will take for your site’s pages to load. You’ll notice a Load Time indicator in the same screen that lets you know if your selection will make load times slow.

slow load time

To keep our font selection from affecting our site’s page load times, we’ve decided to go with a simple selection – light 300 and regular 400.

fast load time

Step 4: Embed the Font Into Your WordPress Website

There are a number of ways you can add custom font to WordPress. We’ll show you how to do it using the wp_enqueue_style() function since it’s the recommended approach for WordPress websites.

Start off by heading back to the Embed tab and copy the link (URL) of your font selection to your clipboard. In our case the complete URL is: https://fonts.googleapis.com/css?family=Open+Sans:300,400.

embed font wp

Next, open up your active theme’s functions.php file using an FTP client and add the following lines of code to it.

Note: You will need to replace the URL with your own.

You can begin using the font you’ve just added by using your theme’s typography options (if it supports them) or by adding some code to your active theme’s main stylesheet. For instance, if we wanted to change all H2 headings to our new font, our code might look something like this:

How to Add Google Fonts to WordPress Using a Plugin

Another (simpler) way to add Google Fonts to your WordPress website is by using a plugin. In this section, we’ll show you how you can use Google Fonts in WordPress using the Easy Google Fonts plugin.

easy google fonts

Step 1: Install and Activate the Plugin

Log into your WordPress admin panel and head over to Plugins > Add New. Search for Easy Google Fonts and install it to your website.

install plugin

Once the plugin is installed, click the Activate button to begin using it.

Step 2: Begin Using Google Fonts

Once you activate the plugin to your website, it’ll automatically enqueue the stylesheets for the Google Fonts you choose to use. To get started head over to Appearance > Customize from the WordPress admin panel.

You’ll notice that a new menu item has been added to the WordPress Customizer called Typography.

typography menu

It allows you to control the typography settings of your paragraphs and various headings (H1 to H6).

edit fonts

Let’s say you wanted to edit the Paragraphs font on your website, the Easy Google Fonts plugin lets you customize its styles, appearance, and positioning. Let’s take a look at the different style options it features.

From the Styles tab, you can configure your script, font family, font weight, text decoration, and text transform. The font family option gives you access to hundreds of Google Fonts categorized as Standard Web Fonts, Google Serif Fonts, Google Sans Serif Fonts, Google Display Fonts, Google Handwriting Fonts, and Google Monospace Fonts.

So, if we wanted to use Open Sans, we would set the script option to Latin, font family option to Open Sans and the font weight to Regular (which is the equivalent of Regular 400).

typography styles

Notice how the font changed in the preview screen? One major benefit of using the Easy Google Fonts plugin is that you can live preview what your posts and pages look like when you’re selecting a font to go with.

Conclusion

Using Google Fonts in WordPress can help you quickly change the look and feel of your website. Whether you’re trying to go for a professional-looking site or a fun one, chances are Google Fonts has the perfect font for you.

We showed you how you can add Google Fonts to your website manually using the wp_enqueue_style() function and by using the Easy Google Fonts plugin. Hopefully, you’re in a good position now to take things further yourself.

Have you ever used a library of fonts on your WordPress website? We’d love to hear from you so let us know by commenting below!

Share your opinion in the comment section. COMMENT NOW

Ibad Ur Rehman

Ibad Ur Rehman is a WordPress Community Manager at Cloudways. He likes to explore latest open-source technologies and to interact with different communities. In his free time he likes to read, watch a series or fly his favorite Cessna 172SP in X Plane 10 flight simulator.

Make Your WordPress Website 100% Faster.

Host it now on Cloudways WordPress Hosting Platform.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.