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.
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.
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:
1 | @import url(http://fonts.googleapis.com/css?family=Lora); |
2 | @import url(http://fonts.googleapis.com/css?family=Oswald); |
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:
1 | @import url(http://fonts.googleapis.com/css?family=Lora|Oswald); |
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:
1 | h1 { |
2 | font-family: 'Oswald', Helvetica, Arial, serif; |
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:
1 | add_action( 'genesis_meta', 'wpb_add_google_fonts', 5); |
2 |
3 | function 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/
