Google fonts are amazing free resource for web designers. In WPBv4, we have started using a popular Google Font combination: Oswald and Lora. Some of our users have asked us how to add Google Web fonts in WordPress themes. If you remember, we showed how to add Google fonts in WordPress Post Editor. In this article, we will show you how to add Google Web Fonts in your WordPress themes the RIGHT way, optimized for performance.
Find the Google Web Fonts that You Like
First thing you need to do is find a Google font that you like. Head on over to Google fonts and browse through the library. When you find the font that you like, click on the “Quick-use” button.
Once you click the quick-use button, you will be taken to a new page. Scroll down till you see the usage instruction box with code that you can add to your website.
You will see that there are three different tabs for adding the font to your site. The first one is the standard and recommended method to add Google fonts to your site. The second tab uses the @import CSS method, and the last tab utilizes the JavaScript method.
We will show you how to use each of these methods and what are there pros and cons.
Video Tutorial
Subscribe to WPBeginner
If you don’t like the video or need more instructions, then continue reading.
Adding Google Web Fonts in WordPress Themes
We have mostly seen folks using the first two methods.
The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2
You can also combine multiple font requests into one. Here is how you would do it:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1
This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.
If you MUST use @import, then at least combine multiple requests into one.
Performance Optimized Method of Adding Google Web Fonts
The best way of adding Google fonts is by using the Standard method which utilizes the link method instead of the import method. Simply take your font URL that you got from step 1. If you are adding multiple fonts, then you can combine the two fonts with a | character. Then place the code in your theme’s head section.
You will most likely have to edit your header.php file, and paste the following code above your main stylesheet. The example would look like this:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2
Basically the goal is to put the font request as early as possible. According to the Google Web Fonts blog, if there is a script tag before the @font-face declaration, then Internet Explorer won’t render anything on the page until the font file is done downloading.
Once you have done that, you can simply start using it in your theme’s CSS file like this:
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3
Now there are a lot of theme frameworks and child themes out there. It is NOT recommended to modify your parent theme’s files specially if you are using a theme framework because your changes will be overridden the next time you update that framework. You will need to utilize the hooks and filters presented to you by that parent theme or framework to add Google fonts properly in your child themes.
Properly Enqueuing Google Fonts in WordPress
Another way to add Google fonts to your WordPress site is by enqueuing the font in your theme’s functions.php file or a site specific plugin.
Tables can't be imported directly. Please insert an image of your table which can be found here.
1 2 3 4 5 6
Don’t forget to replace the font link with your own.
Loading Google Fonts Using JavaScript
For this method you will need to copy the code in the JavaScript tab in Google fonts usage instructions section. You can paste this code in your theme or child theme’s header.php file immediately after <head> tag.
Our last tip on using Google Web Fonts on your site would be to don’t load fonts you won’t use. For example, if you only want the bold, and normal weight, then don’t add all the other styles.