How to Add Google Fonts to WordPress

Sujith Reghu

The font that you use on your WordPress site is an important factor that determines the appearance of the site. Using the wrong font can also impact the user experience of your site. Generally, depending on the theme that you are using, there will be a choice of themes available for you to use. In addition, you can make use of different font services to have access to more fonts and styles. Google Fonts is such a service that will help you add fonts of your choice to your site. In this article, we will discuss different methods to add Google Fonts to WordPress site.

Table of Contents

Google Fonts overview

Google Fonts is a library of fonts and icons with more than 1000 different font families that you can experiment with on your website or digital products. You can easily integrate it using Android or CSS. Google Fonts allow you to experiment these collections in more than 100 different languages. It also gives you detailed information about the process behind the development of these themes. Furthermore, you will get analytics data that will help you understand the usage information of different fonts.

Google Fonts make high quality typography easily available to varied users all around the globe.

When you access Google Fonts, they will be sorted by default based on the usage trends and popularity of your geographical location. You can easily customize your choices with the help of user-friendly filters. Google Fonts can be easily shared when you are working on a collaborative digital project. Overall, it has made it very easy for digital entrepreneurs and designers to access high quality typography. On Google Fonts, you will also find a collection of interesting icons as well.

Google Fonts also offers a vast collection of icons that you can easily use on your website or any other digital product.

Furthermore, you will not have to to worry about any license-related issues while using Google Fonts. They are free and open source, and makes them accessible for any project. Another interesting feature of Google Fonts is that based on the technology that your browser supports, Google will send the file in the smallest possible size. This will make it extremely easy to access the web even from places where connectivity is slow.

How to add Google Fonts to WordPress manually?

There are multiple ways you can try to manually add Google Fonts to your WordPress site. First, we will discuss these options.

By modifying the functions.php

To integrate Google Fonts, you can add a code snippet with the link to the specific font family in your functions.php file. Here are the steps:

Go to Google Fonts and select a font of your choice.

Select a style and then the embed code will be displayed on the right. You can copy the link font.

You can add the font link to the below code snippet, and then add it to the functions.php file.

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

As an additional CSS

You can use the embed link to the style.css file. For this, you can select the @import option, and copy the link.

Now, you can add this copy to the Additional CSS section on your site. Go to Appearance > Customize > Additional CSS, and add the link to the field as the below screenshot:

How to add Google Fonts to WordPress using a plugin?

Now, if you find the manual process cumbersome, here is an easier option using a plugin. The plugin you can use is Easy Google Fonts.

Here is how you can manage to add Google Fonts to WordPress using the Easy Google Fonts plugin.

First, download the plugin from the WordPress plugin repository. It is free to download. Then, install and activate it.

If you are not familiar with installing a plugin on your site, please check our article on how to install and activate a WordPress plugin.

Now, you will see a new menu on your WordPress admin panel as Fonts plugin. Click Customize Fonts, and you will be taken to the Customizer (Appearance > Customize). Here a new section will be added – Fonts plugin. Click this, and you will be able to access four different sections – Basic settings, Advanced settings, Font loading and debugging.

Go to Basic Settings, and from the ‘Font Family’ dropdown, you will be able to choose from more than available Google Fonts for different sections of your website, such as base typography, heading, buttons and inputs, etc.

This plugin makes it extremely easy to access Google Fonts from your WordPress site.

Easy Google Fonts Plugin

Another popular option to add Google Fonts to WordPress site is this plugin. Instead of adding a specific font using the embed code, you will be able to access more than 600 different Google Fonts on your website. Moreover, you will be able to preview Google Fonts on your site real time using this plugin. Also, there are options to add custom font controls, which you will see in the Customizer preview.

How to optimize Google Fonts usage?

When you are using Google Fonts, and a user’s browser request a font, Google gathers information about their IP address for analytics purposes. This could lead to GDPR compliance issues. You can use the OMGF plugin to tackle this challenge. With the help of the Google Fonts Helper API the fonts used by your plugins and themes will be cached. This will minimize DNS request, and enhances your site performance.

You can optimize the usage of Google Fonts on your website with the help of this interesting plugin.

Please note: Many WordPress themes will have Google Fonts integration by default. If the theme you are using has Google Fonts integrated, you can use it without the options mentioned in this article. You can check in your theme panel to find out if Google Fonts are already integrated.