How to Add Google Web Fonts in WordPress Themes the “Right” way

Uncategorized

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.

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:

@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);

You can also combine multiple font requests into one. Here is how you would do it:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

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:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lora|Oswald” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”YOUR THEME STYLESHEET” media=”screen”>

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:

h1 {
font-family: ‘Oswald’, Helvetica, Arial, serif;
}
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.

function wpb_add_google_fonts() {

wp_enqueue_style( ‘wpb-google-fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false );
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’ );
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.

No Comments

Leave a Reply

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

Uncategorized
What Exactly is WordPress

Whether it’s visiting us at Speckyboy or other design/development blogs, you’ve undoubtedly run into countless articles about WordPress. There are all sorts of rundowns of terrific plugins, themes or tutorials on how to do just about anything with the popular content management system (CMS). That’s all well and good. Sometimes, …

Uncategorized
How to Find the Best WordPress Theme for Your Business

You’ve probably already heard how WordPress is a very popular platform for bloggers, and chances are, a majority of the blogs you read every day were created with WordPress. While it is the best blogging software available, thanks to some great theme developers, WordPress has now also become arguably the …

Uncategorized
What exactly are wordpress theme frameworks

Much of the impression that customers or users have about a company comes from the official website. Before they start to read the contents, the first thing that their eyes will grace is the overall aesthetics where they can make inferences about trustworthiness, credibility, and whether they like you or …