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.
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.
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.
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.
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.
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.
We hope this article will help you effortlessly add Google Fonts to WordPress site. Let us know in comments if you have any queries or concerns.
Further reading