How to Use Google Fonts in WordPress - IndiThemes

Whenever you are looking for an awesome font for your next website, Google Fonts is usually the first choice. It provides a massive library of fonts free to use without having to worry about any cumbersome licenses or subscriptions. It is an open source library in which contributors can add fonts. In this article, we take a look at how to use Google Fonts in WordPress Themes and integrating them without using third-party plugins. In the end, we are going to see some tricks we can use to optimize Google Fonts integration into our website.

Why use Google Fonts in WordPress

The Google Fonts library is widely used across the internet for its extensive collection of fonts. One of the main reasons for its popularity is its usage policy. According to Google’s documentation, most of the Google Fonts are under the SIL Open Font License (OFL). This license permits usage and distribution even in commercial products. This policy makes it ideal for integration with WordPress, as WordPress is an Open Source platform. All WordPress themes and plugins are distributed under the GPL or an equivalent license.

Another reason Google Fonts are the best choice for WordPress websites is the sheer ease of using Google Fonts. Earlier, in order to integrate fonts into websites, web developers used to add the required files for fonts(TTF, OTF and more recently WOFF and WOFF2) and add them to CSS files with @font-face rule. This method involved storing font files locally. Sometimes, these files would be bulky and contribute to increasing the loading times of a website. Google Fonts are completely server hosted. All you need to do is make an API request to Google’s server and receive the required font files as a response. This makes it very easy to integrate Google Fonts without the need to store the font files locally. Additionally, Google automatically optimizes these files and delivers the files in WOFF2 format.

For comparision, I downloaded both TTF and WOFF2 font files for Roboto regular font to see the difference in file sizes. Here are the screenshots comparing their sizes.

Use Google Fonts in WordPress - Roboto Regular TTF Use Google Fonts in WordPress - rOBOTO regular WOFF2

As you can see, WOFF2 files are significantly smaller than their TTF counterparts. Serving Google Fonts has a big advantage in terms of optimization and efficiency. We can further improve on it which we are going to discuss later. This makes Google Fonts a cleat choice for Web Developers when it comes to adding fonts to their websites.

How to Use Google Fonts in WordPress Themes

After discussing why Google Fonts are an obvious choice as website fonts, let’s see how to  use Google Fonts in WordPress Themes. While there are a lot of plugins that can be used to add Google Fonts in WordPress, we’ll be focusing on doing it without plugins. For the sake of this article, I’m going to add the font Playwrite Cuba in my project. You can add any font of your choice. Steps are the same.

Getting the Embed Code

In order to add Google Fonts in our WordPress project, the first we need is the API request URL. Follow the following steps-

  1. Go to fonts.google.com.
  2. After searching for the font, open it. You’ll se a Get font button appear at the top-right of your screen.
    Get Font Button - Google Fonts
  3. After clicking, our font will be added to the basket. You’ll notice the basket icons gets updated and a new screen appears.
    Google Fonts - Font Family Selected
  4. Click on Get Embed Code. A new screen appears with different options for getting the embed code.
  5. Notice that Playwrite Cuba a variable font. We can install the variable font (Full Axis) or a single weight (One Value). For simplicity sake, I’m using “One Value” and download the Regular 400 weight. Since we need the code for a website project, we select the “Web” tab in the right box. Notice the Embed code –

This is our embed code. We need to add it in our WordPress website. There are a few ways we can add it in our WordPress website. Let’s go over some of the ones I’ve been using or have used at some point of time.

Adding the embed code in a WordPress Theme

1. Adding the code in header.php

The first method is probably the most straight forward and the least recommended one. Add the code directly in the header.php file. If you are using a classic WordPress Theme, you should find it directly in the theme directory. In case you’re new to WordPress and unsure where to find the theme directory, in your WordPress installation, go to “wp-content” folder. There you’ll fin the “themes” folder. You can find your theme directory in the “themes” folder. It should be a directory with your theme name.

Open the header.php file. In the file, find the </head>  closing head tag. Paste the embed code just before the closing head tag and save the file. Now, go to the browser and refresh your site. The site is now loading Google Fonts. In order to verify this, you can use the following steps–

  • While on the site, press Cmd+U/Ctrl+U.
  • The source code for the site should open in a new tab. Search for “fonts.googleapis.com”.
  • This is the URL the browser makes an API request to in order to fetch fonts. You should be able to find the URL and the request made to Google servers.

2. Using the wp_head hook

In this method, we use the wp_head  action hook to add Google Fonts to our theme. This method is an improvement from the first method as using this method, you don’t need to modify the header.php  file. We just add a code snippet in the theme’s functions.php  file. Open your theme’s functions.php  file and add the following code and the end of the file–

After sacing the file, you should be able to load Google Fonts in your WordPress website.

3. Using a Child Theme

In this method, we add Google Fonts using a Child Theme. This method has an added advantage that it will make our change future-proof. In case the theme gets updated in future, our changes will remain and not get reset after update. It is similar to the previous method but in this case, we add the code snippet in our Child Theme’s PHP file. In case you are not sure how to create a Child Theme, please refer to WordPress’ official documentation. It’s a comprehensive documentation and should help you create a Child Theme for your website.

In order to add Google Fonts, perform the following steps–

  • Create a Child Theme of your theme and activate it.
  • In the Child Theme’s functions.php file, add the following code–
  • You should be able to load Google Fonts in your WordPress theme.

So, these were the basic ways you can add Google Fonts to your WordPress Theme or website. For most, it is enough and should get the job done. But what if I told you there are some further optimizations you could do in order to achieve further optimization. We’ll take a look at some of the ways we can optimize integrating Google Fonts into our WordPress Theme.

Optimizing the API Request

While the above methods are completely okay and work perfectly fine, they are not quite optimized. We can further optimize it. For that, we need to look a bit closer to the actual URL in the API request–

In this URL, we are making a request to Google to retrieve the “Roboto” font with just the “Regular” font weight. We can request more weights by modifying the URL and adding the additional weights to the URL query like so–

In this request, we are requesting a Regular, Regular Italic and a Light font weight. To get your required set of weights and styles, you can customize your query in fonts.google.com when you are getting your embed code. For the sake of this article, I’m just requesting the “Regular” font weight.

After entering the URL, the server sends us a CSS response that should look something like this–

It is a bunch of @font-face rules for different subsets of the font (latin, latin-ext, vietnamese, greek, cyrillic and more). This means the browser is loading all of these subsets. We can optimize this by loading just the subsets we want. If you know your website will only ever be using English, then we need to load only the latin subset. For this, we need to optimize our query. In case we need only Latin subset, we a subset  argument to the query with value latin  like so–

https://fonts.googleapis.com/css?family=Roboto&subset=latin&display=swap

While the request appears to be the same, Google has optimized the response in order to provide only the latin subset. Moreover, the API also detects the text and sends the subsets accordingly further optimizing the response.

Loading WOFF2 files locally

Another possible and in my opinion, the best optimization is loading the font files locally. More recently, users have started hosting fonts locally instead of requesting from a CDN. There are a couple of reasons for this transition-

  1. Firstly, it is a compliance measure. In order to comply with regulations such as the GDPR, resources are required to be loaded locally instead of a third-party service.
  2. Also, hosting resources locally reduces website latency and leads to better optimization.
  3. Also, to take benefit of the WordPress offering – Block Themes, it is preferred to host the files locally.

We can get the WOFF2 files from the API response we received earlier for our API request. Notice the src  property for each of the @font-face  rules. It provides link to the WOFF2 file for each subset. We can download the file from the link and bundle it in our theme and load locally. I usually prefer to store all WOFF2 files in assets/fonts  folder in the theme directory.

So, we go ahead and download the WOFF2 file for the “Latin” subset and store it in assets/fonts folder naming the file “Roboto-Regular.woff2”. In order to load the font, we just need to add the @font-face  rule in the required CSS file. Suppose we have our main.css file in assets/css  folder, our @font-face rule should be something like this–

Loading fonts locally reduces a request to a third-party server and helps in optimizing the website.

We can get creative and futher optimize the request but I think this is enough for this article. In this article, we covered a lot – from embedding a simple code in our header.php to really going into the details of our API request, I hope you got to learn something from this article. In this artcle, we took a look at how to use Google Fonts in WordPress Themes without adding any third-party plugins. Looking forward to hearing your response. If you would like to gain more knowledge about the nitty gritty of WordPress, do check out our other articles. See you in the next article.

Meet the Author

Divjot Singh

Divjot is an experienced WordPress developer and technical writer with more than a decade of experience in WordPress Development. Whenever he's not creating amazing WordPress experiences, he can be found on the road with his bike.

Leave a Reply

Your email address will not be published. Required fields are marked *


You might also like...