How to use the Google Font Directory with WordPress

Way back in the dim and distant past of the 1990s it became possible for designers to start using fonts in web design. While this seemed like a great step forward, it was also restrictive and caused endless headaches. Fonts could be used, but only fonts that were already installed on the visitors’ computer. A group of web-safe fonts emerged, which were fonts that were used on most personal computers – these included Arial, Verdana, Georgia, and, for some reason, Comic Sans.

These days life is much easier. Fonts can be stored in the cloud and then implemented in designs. There are paid companies such as Typotheque and Typekit but if you don’t want to pay you can take advantage of the excellent Google Font Directory. Today I’m going to show you how to use it and how to install and use the fonts on your WordPress website.

We’re use two methods – manual and plugin. The manual method involves a little bit of code editing but nothing too difficult. A plugin, as always, makes life easier but I think gives you a bit less control over the whole thing.

Let’s get started:

1. Visit Google Fonts

Follow this link to the new Google Font Directory.  If you are visiting straight from Google you’ll end up on the old interface so click the link at the top that says “Try the new Google Web Font Directory.”

The new directory is much more usable that the old directory. You can now choose more than one font and compare them which is a great help to get the right font combination.

2. Choosing Fonts

The first thing that we want to do is to start choosing some fonts. We’ll create a collection and see how they look together.

Click on “Start Choosing Fonts”

You’ll see that without any filtering there are 190 fonts. This number is growing all the time as more and more typographers submit fonts to the directory.

Some tips to get the right typography:

  • If you’re using more than one font go for contrast. Fonts that are fairly similar look like there is something wrong with the typography
  • Font families are designed to work together. It may be that there are enough fonts in one family to take care of all of your typography needs
  • Use a maximum of three fonts to avoid your website becoming cluttered
  • image with serif and sans serif fontNormally use serif fonts for headers and sans serif for body content. This is because sans serif fonts are easier to read on a screen (of course, rules are made to be broken!) In technical terms, serif fonts have curly doodley things on them and sans-serif don’t (hence the “sans”)
  • Don’t use script fonts for body copy. You may want to use a script for your logo or headline but avoid using them elsewhere. They are difficult to read.
  • Use fonts that complement your design. If you are going for an olde worldy sort of look then a font like Michroma would be way out,  – a font such as Caudex would be more appropriate

Let’s take a look around the directory:

overview of google font directory ui

On the left hand side you’ll see some filters which you can use to choose your fonts. At the time of writing this article, there are 190 fonts in the directory. You can choose to see all of them or you can filter by categoryserif, sans-serif, display or handwriting. You can also filter by thickness or by script. This will help you to narrow down the fonts you want to use.

For this example I want to find a modern serif script for my headers, and a sans-serif for my body text.

3. Select serif fonts

If you filter for serif fonts you’ll see that there are 45 fonts available. In the old Google fonts you could look at these in the font previewer but only one at a time. Now we can create collections.

Also, in the new directory you can choose how to view a font – Word, Sentence and Paragraph. This is really helpful for choosing fonts that are going to be used in different contexts.

You can also change the text that is used by clicking of the dropdown beside “Preview text.”

For the moment I’m going to choose some serif fonts. Find the font that you want and select “Add to Collection”

You’ll see the font appear in your collection at the bottom.

4. Select sans-serif

Sans –serif fonts are great for body text as they are normally easier on the eye on the screen. However, this isn’t always the case so you shouldn’t feel restricted that you must always choose a sans-serif for body text. Just choose a font that someone can easily read a large amount of text in.

This time I’m going to view a paragraph of text by clicking the paragraph tab.

Now you can see the font with a random sentence followed by the opening of Franz Kafka’s The Metamorphosis – nice touch Google!

Choose fonts that you like but make sure that they are subtle and readable. You see, I say that sans-serifs are better for screens but then you end up with something like Sigmar One which is underable as a body font.

It’s easy to spend ages choosing fonts that you like but try to find ones that are appropriate to your website. Remember, your typography should be both a compliment to your design and an aid for your reader.

5. Review Your Collection

click the review tabWhen you have chosen fonts that you like the look of click on the “Review” tab:

On your new screen you have five tabs at the top. Let’s look at each of them:

  • Specimen – gives you each font singly as header and body text
  • Styles – this shows you how many styles each individual font has. Some fonts, like Arvo, have lots of individual styles whereas others, like Bevan, only the one. This may affect your choice of font, as you may want to use different styles of the one font.
  • Test Drive – this is where the fun starts. You can apply fonts to headings, sub-headings, intro-text, body text and sidebar text. This really helps you to see how your fonts are going to look on your webpage. We’ll play with it in a moment.
  • Character Set – this shows the special characters a font has. Again, this may influence how usable a font is in your own content. It may be that the special characters aren’t adequate for your purposes.
  • Description – a description of the font.

6. Test Drive

Now we’re going to test drive our fonts. Click the test drive tab

One the left hand side you have an interface for changing the styling on the text. You have the normal CSS properties:

  • Font family
  • Style
  • Size
  • Transform (none; uppercase; lowercase; capitalize)
  • Decoration

And then you have sliders for:

  • Letter spacing
  • Word spacing
  • Line height

This makes your typography incredibly flexible!

You’ll see that as you apply different CSS properties they appear in a CSS box under the text. This is what you’re going to use on your WordPress website.

 

Click to edit text

You can double click on a piece of text and edit it. Copy and paste text that you plan to use on your own website to see how it will look.

Tip: You can download all of the fonts as a collection. This will let you use them in designs that you’re putting together on your computer. You can also download all of the fonts from the Google Directory.

7. Put Your Font to Use

gauge showing 7 fonts slowing page load time, 2 fonts less soI’ve decided to go for Corben for my headings and Varela for the body text. When you have decided on your font, click “Use” at the bottom corner.

On the next page you’re shown the fonts you’re going to use. Make sure that only the fonts you actually want to use are selected. You can see how they have a major impact on load times.

I’m only choosing one version of Corben and one of Varela.

Scroll down and choose the characters you want. Again – just choose what you’re going to use.

8. Grab your Code

The third step here is where you grab your code. You have three options:

  1. HTML – to be inserted into your header.php file
  2. @import – to be inserted into your theme’s CSS file. This must always be first in the document
  3. Javascript – the webfont loader is a more advanced method that lets you add fonts from different libraries – Google and Typekit, for example. Because it’s not necessary to use javascript to simply insert a couple of fonts I’m not going to cover it here.

 9. Insert into your theme

Now you get to choose where you want to put your code. My recommendation is to insert your code into the stylesheet of a child theme. This means if you are using a theme that is regularly updated your edits won’t be written over. But let’s look at both ways you can do it from the WordPress dashboard:

a) HTML

Go to Appearance > Editor and find your header.php file.

Find your tag and insert the code straight after it.

Tip: It’s important that the code goes straight after the first <head> tag. This is because, in Internet Explorer, if the <link> is placed after a <script> tag the entire page will block and nothing will be displayed until the web font is loads.

b) CSS @import

Go to Appearance > Editor and find your stylesheet

Insert the @import code at the top after the template info

10. Add CSS

Go back to the Google fonts directory and click “Review” at the bottom right hand corner.

Click on the text that you want to grab the CSS for.

The CSS will appear at the bottom of the stylesheet. Copy it and then paste it into your WordPress stylesheet, applying it to the correct element.

copy and paste from google into your WordPress stylesheet

11. Check out your new fonts

Go to your theme, refresh and check out your beautiful new fonts.

Before:

twenty eleven with normal fontsAfter:

Twenty eleven with corben and varela google fonts

Using a Plugin

You can, of course, use a plugin to get this done. The most popular Google Fonts Plugin is WP Google Fonts.

You can choose fonts using the dropdown menu and then apply them to different typographical elements on your website. Personally I prefer to manually install them but a plugin does the job just as well.

Later in the week I’m going to take a look at some great font combinations that you can use on your WordPress website.

Further Resources

Tags

Comments (28)

Participate