Hosting Tutorial & Guide

How to Add Google Fonts to a WordPress Site?

updated on Apr 13, 2016
How to Add Google Fonts to a WordPress Site? If you want a boost of the style of your WordPress site, changing the fonts used by the theme is a great yet easy way. In this situation, you will consider the Google fonts library, a free source of over 700 web fonts.

Adding custom Google fonts to WordPress is not hard because Google provides several easy methods for you to implement the fonts you like on your own website. In below, we will detail how you can do everything successfully with simple codes. If you really do not want to touch any code, then refer to the plugin use introduced thereafter.

Choose the Google Fonts You Will Use

First of all, you need to access the Google fonts library and look for the fonts you want to use. At this time of writing, there are 708 font families available, and you can find the one(s) you like by using the search box on the upper left of the page.

For this tutorial, we will use two fonts named PT Sans and Indie Flower. After locating the fonts, click on the "Add to Collection" button placed after the font example.

Add Fonts

When all fonts are added to the collection, scroll the page down and you will see all the fonts you choose listed under the "Collection" tab. There you can delete any fonts by clicking on "x". When the list is ready, click on the "Use" tab.

Fonts Collection

On the new page that appears, there are some settings to deal with. The first step is to choose the styles. For the available styles, you can certainly select as many as you want. However, the more you use, the longer your page loads will take. Therefore, we suggest keeping the styles to the minimum. The bottom line is that the page load time shown on the graphic does not exceed 160.

Choose Font Styles

The second step is to select the character sets for showing special symbols included some languages like Vietnamese. If you do have requirements on these character sets, then tick the corresponding checkboxes, and if you only use English characters, keep the setting to the default. Choosing any of the character set will increase the page load time.

Choose Character Sets

Next, you are heading to the third step which displays some codes for adding those fonts to your WordPress site. Now you can choose one method from the following two to make full use of the codes.

Google Font Codes

Add Google Fonts with the Standard Method

This method utilizes the link offered under the "Standard" tab. The entire process is easy as you only need to copy the font URL and paste it in your theme.

Open and edit the header.php file of your WordPress theme, and then paste the code below before the main stylesheet. Remember to replace the font URL with your own.

Font URL

In fact, we highly recommend you to add the code to a child theme instead of the parent theme because the modifications made to the latter can be easily lost when theme updates are applied. If you do not know how to create child themes, refer to this tutorial.

When you are done, you can start using the new fonts in your theme. Just open the style.css file and add a new font declaration like what we've done with the code below. Depending on your needs, you are able to use the Google fonts for any typography such as the body, h1, h2, etc.

Add Google Font to Stylesheet

If everything works well, now you can refresh your site and see that the main body copy of your WordPress site is updated with the new font you added in the stylesheet.

Add Google Fonts with Enqueue

Enqueuing Google fonts in the functions.php file of your theme is another choice adopted by many WordPress users. For this method, you need to edit the required theme file and paste the following code at the bottom. Still, replace the font URL with your own one, and try the code with a child theme.

Enqueue Google Fonts in functions.php

After doing so, add the new fonts in the stylesheet of your theme and test the display in the same way which is introduced above.

Add Google Fonts to a WordPress Site by Using Plugin

The manual methods discussed in this post are easy to deal with. However, in case that you are not fond of trying any code, we will also introduce a plugin named Easy Google Fonts. This plugin is compatible with almost all WordPress themes, and it makes adding Google fonts a breeze for everyone.

Easy Google Fonts is integrated with the WordPress theme customizer. Therefore, after installing the plugin, you can simply go to the theme customizer by clicking Appearance > Customize, and then edit the font of any typography. Opening the dropdown for "Font Family", you will get over 600 custom Google fonts to choose. Now, select any font and gain a live preview in the customizer.

Use Google Fonts in Theme Customizer

Adding Google fonts to your theme by using Easy Google Fonts is super easy. However, the only demerit is that you will always have to rely on the plugin and you have little control over its impact on the site performance. So if you feel comfortable, you can still give a try of the manual methods.