Using Google Web Fonts with WordPress

WordPress Google Fonts

Have you ever wished that you could use a different font on your blog, perhaps for titles or menu text?

It’s an age-old problem – how do you make your blog look and read great while being limited to a narrow selection of “web-ready” fonts?

The most common solution is a two-pronged approach. First, the web designer will choose from the web-ready fonts the most suitable typefaces to be used on the website. After this, they will use the CSS chain system to specify which fonts should be used, and in what order, by the user’s web browser.

Using this system, all major browsers on all platforms (which have different default fonts) are covered. The problem with this it is that it isn’t particularly flexible for displaying new fonts, as fonts are not included in web page code – they’re added by the user’s browser.

The Downside to Text Displayed as an Image

One way of combating this problem over the years has been to display logos and menu text as images. This works to some extent, but is a nightmare for accessibility.

For instance, text images don’t scale well and you can’t highlight the text. Crucially, however, images aren’t readable by screen reader applications, and loading them up slows down the web page. There’s another downside – unless you use the image replacement technique, search engines can’t read the logo or menu titles when they’re displayed as images.

These are all clearly major problems, but over the last few months a new solution has been made available, one that can be easily incorporated into any web page, including one built on WordPress.

Meet Google Web Fonts

Google is a unique resource. Not only does it offer the world’s most popular search engine, it offers many free “satellite” products from email to browser-based office applications, productivity solutions and mobile apps. One of the most popular services it offers is Google Drive, a cloud-based storage system that enables you to retrieve your data from anywhere.

The ubiquity of Google makes Google Web Fonts an attractive option to web designers; it basically means that a font can be displayed which isn’t one of the exclusive web-ready club.

Like Google Drive, the web fonts are stored in the cloud. The system allows you to embed code in your website to instruct the CSS document to “pull” the font from Google, adding it into the website whenever a page is loaded.

The results can be astounding, and this method requires no graphics work. Best of all, it is an excellent solution to the accessibility issues mentioned above!

Google Web Fonts and WordPress

Google Web Fonts are low-bandwidth, optimised to be called by web browsers around the world. Better still, the service gives you the code you need to add into your website in order to use the fonts – you don’t have to get your hands dirty!

Hundreds of fonts are available, so to get started head over to Google Web Fonts and click Start choosing fonts to start browsing through what is on offer. You can scroll through the default list, use the search box or filter by category or type to find the font you’re looking for.

When you’re happy with a font, click the Quick Use button to take a look at the impact on page load time (displayed via a graphical dial), select the graphical set you want and then use the Add this code to your website box to copy the code.

For WordPress users there are different ways that you can do this. The easiest way is to use external fonts is to install a plugin like this one WP-Google-Fonts, FontMeister or Fonto.

And then there is the standard option by modifying your theme: To do this, open Appearance > Editor and select header.php. Find the <head> HTML tag and paste in the code into an empty line. The code will look something like this:

<link href='http://fonts.googleapis.com/css?family=FONTNAME rel='stylesheet' type='text/css'>

Save the header.php file, and then open your CSS stylesheet. Against the name of the element you wish to add the web font to, add the CSS information from section 4 of the Google Web Fonts Quick Use page. It should look something like this:

H1 {font-family: 'Gabriela', serif;}

Save the stylesheet document and refresh your website/test page.

Conclusion: Not Using Google Web Fonts? You Should Be!

As you can see, using Google Web Fonts offers a massive stylistic advantage to your WordPress blog. The system is easy to use, adheres to accessibility rules and because the data is stored in the cloud you don’t have to worry about your own bandwidth. Additionally, because it is so easy to add, it is also simple to change next time you add a new theme to WordPress.

To summarise: If you’re not using Google Web Fonts already, make plans to do so!

3 thoughts on “Using Google Web Fonts with WordPress”

  1. For a lot of my work, sticking to web fonts makes for a safer option. I think the issue is really two fold and its not a wrong or right answer, just a consideration.

    1) Load times, if your site is SERP sensitive, adding code which increases load time may be a step to far.
    2) Backwards thinking. You can’t assume Google fonts will work 100% of the time for 100% of web browsers, you need to assume Google web fonts will break and as such think in terms of suitable fallback fonts. If consistency is an overriding factor, then keeping is web safe may still be your best option.

  2. While on the whole I applaud you for helping spread the word about this option to the general public, as it’s a far better approach than placing in an image of text. I just want to leave the caveat that for anyone who wants to go crazy with lots of fonts, it will effect your load time (which you briefly mentioned).

    A middle ground approach is probably the best balance between design and the end user’s experience, where maybe just the page or article headings have a web font, but the majority of the site runs with system fonts. Of course this is always up to your values: design, or usability? Something to keep in mind with adding just about anything to a site (especially if you’re a glutton for lots of side widgets haha).

    1. I think you are well of with two Google Fonts. One for the headlines and one for the text.

      I am using two combinations of two Google Fonts in almost all my developments.

Leave a Reply

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

You May Also Like...