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

Google Web 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 toGoogle fonts library and browse through the fonts. When you find the font that you like, click on the “Quick-use” button.

Google Fonts Quick-use Button

Once you click the quick-use button, you will be taken to a new page. Scroll down till you see the box: Add this code to your website.

Add Google Fonts to WordPress Code

Copy that code and paste it in a notepad for future use. We are seeing that most folks use at least two google fonts (heading + text combo). Like we did with Oswald + Lora. So repeat this process for the second font.

Adding Google Web Fonts in WordPress Themes

As you can see that Google provides 3 possible ways of adding Google web fonts to your website. There is the “Standard” way, “@import” way, and the “Javascript” way. 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 step one like so:

We have seen a lot of folks doing this. StudioPress developers are doing it this way in their Genesis child themes because its simple. However, this is NOT the right way of doing it. Using @import method blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. So while it may seem convenient, it is not the BEST way if you care about your site’s speed and page load time. You can see more details about it here.

The next best thing you can do is merge multiple Google Fonts requests into one to avoid additional HTTP queries. Here is how you would do it:

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 doing this is by using the Standard method which utilizes the link method instead of the import method. Simply take your two URLs that you got from step 1. 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:

1<link rel="stylesheet" type="text/css"href="http://fonts.googleapis.com/css?family=Lora|Oswald"media="screen">
2<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 theGoogle 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:

1h1 {
2    font-family'Oswald'HelveticaArialserif;
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.

As you can see by looking at our Blueprint page, that WPBv4 is a custom child theme of the Genesis framework. So we will show you how to add Google Web fonts in your Genesis powered theme.

How to Add Google Web Fonts in Genesis Child Themes

Open your child theme’s functions.php file and paste the following code:

1add_action( 'genesis_meta''wpb_add_google_fonts', 5);
2
3function wpb_add_google_fonts() {
4        echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';
5}

Don’t forget to replace the font link with your own.

Basically what we are doing is hooking into genesis_meta hook which excutes in the section of the document source. By default things like META description, keywords, stylesheet and favicons are output here. By us setting the priority to 5, we ensure that this stylesheet will be loaded before the main stylesheet.

Sorry we cannot cover all existing parent themes and frameworks that exist. If you have a question regarding your specific theme, then please ask those in the appropriate forums to those theme developers.

Our last tip on using Google Web Fonts on your site would be to don’t ask for fonts you won’t use. For example, if you only want the bold, and normal weight, then don’t add all the other styles.

We hope that this article helps you add Google Web Fonts in your WordPress themes the right way, so your site can load fast.

 

Original Article here: http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

Share:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Leave a Reply

Your email address will not be published.

Social Media

Most Popular

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.

Categories

On Key

Related Posts

Chavas Tacos – Mexican Food

Chava’s Tacos El Original is a Mexican Food Restaurant in the Chicago West side which is open 24hrs a day. The website was created on

TEJANOS CHICAGO – Event Space

TEJANOS CHICAGO started out as a Wix website with online ordering but when the restaurant acquired a Clover POS system the site move to WordPress.