How to Add Google Web Fonts to Your Blog
Gone are the days when the design of your blog was limited to just a few select fonts. There are many new solutions to help you implement just about any font that you desire. This can range from hosting the font on your server, paying for a service, or tying into an API such as Google Web Fonts.
The latter option of using Google’s font directory is one of the easiest processes for font substitution and the benefits of using Google Web Fonts are numerous. They are free, open source, and offer a vast variety of over 500 options at the time this tutorial was written. The implementation is easy and when using the API, you get the added benefit of utilizing Google’s fast and reliable servers. While most modern browsers support custom font integration, there are graceful fallbacks to default fonts when not supported.
There are three different methods to apply the fonts to your blog using the API and we are going to focus on what they’ve termed the Standard method. I will be illustrating this effect using a Wordpress blog but nothing in the steps are exclusive to Wordpress or require extra workarounds.
Browse and Select A Font
The first part is fun because you get to browse and select the font that you think fits best with the style of your site. You can do this by visiting Google Web Fonts and scrolling through all of the options (501 fonts at time of publish).
Test Drive the Fonts
To help aid your search, you can enter text in the preview area to simulate the look and feel of the fonts in real time. In this case, I copied and pasted an actual blog title that I would be replacing with the new font. Once you find the style you are looking for, you can click on the Quick-use link to move to the next step.
Select the Style of the Font
Within most of the font-families you are able to get more granular and choose the actual style that best suits your needs. You can choose more than one but be wary that the page load speed can degrade with the increase in quantity of the font styles chosen.
Copy the Code for the Header
Copy this line of code to your clipboard for pasting in your template header in the next step.
Paste the Code Into the Header
Navigate to the header.php file in the built-in editor of your Wordpress admin. Paste the line of code in the head section of the file with the other stylesheet calls.
Copy the CSS
Head back to the Google font page and copy the CSS font-family reference to be used in the all of the locations for font substitution.
Locate the Element for Substitution
In my example I used Firebug to locate the title H2 element that I will be converting to the Oswald font. This H2 element is consistently called throughout the site for the post titles.
Paste In the CSS Code
Next, navigatge to the stylesheet containing the CSS element in the Wordpress editor. Once you have found the element in the stylesheet, paste in the font-family code and update the file. This step can be repeated for all elements that need to be converted to the new font.
See the Results
Leave the admin and visit your blog to see the changes. You should see your new font in all of its glory!
In case you don’t see the change you expected, here are a few gotchas to help with troubleshooting:
- Make sure you refresh (preferably a hard refresh) your blog if you already had it open in a tab.
- Your browser may have cached the old css. Check your blog from a browser you seldom use.
- Make sure you are using a modern browser. (Internet Explorer 8 or less needs to be updated)
- If you have a Wordpress cache plugin, it may be hard to reload the CSS.
- View the source to make sure your header is displaying the link to the Google api.
- Use Firebug or an equivalent to inspect the element to ensure it is picking up the new style.
This tutorial utilizes Wordpress but the steps are the same if you have write access to your page head tags and to your CSS. Surprisingly, the whole process is much easier than most believe when beginning to add web fonts to your project. Have fun coding!
Blake Poutra is a designer and developer for You Design It. You Design It is a custom t shirt printing company.
great tip!
The only thing that I will add to this is a reminder to not go font crazy. The issue with using Google Fonts, while fantastic for the most part, is that it can slow down your website. This happens because you have to download the font from Google instead of it being in your directory files. People tend to forget that and then add 15 fonts and only use 2.
Definitely — Blake touches on this in the Styles section, explaining how the more you select, the slower the load speed.
Not only can a slow site tarnish your UX, it also affects your rankings within the search engines. Keep it lean!
Thanks for adding Susan. A very important consideration.
Thanks! I was looking for a way to easily add Google Fonts!
This was helpful and easy to follow along with. Thanks.
Just a simple WOW!
Thanks for the clear tutorial, even an oldster, like me, understood this.