Add and Use Google Web Fonts

Applies to Version(s): Thesis 2

Attention! This page has not yet been updated for Thesis 2.1.

Google offers over 500 web fonts that can be used on your site.

You already know that typography is important, and you know that eye-catching fonts can increase conversions and help your site reflect your tone and better “talk to” your target audience.

But there are thousands of fonts out there — you may even have hundreds on your own computer. So why use Google fonts?

Easy Sexy Fonts

The answer is simple. To appear the way you see them on your computer, your visitors’ devices must also support that font.

There are only a handful of “normal” web-safe fonts that you, the site owner, can expect most visitors will see, as intended, on nearly all devices. Arial, Verdana — a handful of others.

If you love Helvetica, you’ve got great taste! But most Windows visitors won’t see Helvetica — they’ll get a “fallback” font that their system has installed.

Avoiding these kinds of problems is where Google Web Fonts become very useful.

Google web fonts don’t rely on the fonts that exist on a visitor’s computer — Google’s fonts are platform agnostic. In other words, a site using Google’s web font “Droid Serif” will appear precisely as you wanted it to — even if that font is not locally installed or supported.

How does it work? Google’s fonts are downloaded by the visitor’s computer — fast — and the font is then applied to all text to which that font has been assigned.

The “download” component is notable. Google fonts are optimized and served quickly, but each additional font does consume bandwidth for your visitors.  Each Google font used on your site will slow your page speed.

Fat Fonts are Slow Fonts

One or two Google fonts won’t hurt your site speed significantly — but using a dozen fonts of this kind would have a notable impact.

Be selective, use two or three Google fonts, and you can add visual excitement to key areas of your site — without images.

How to Install a Google Web Font in Thesis 2.0

Step one: Find the font you want in the Google Web Fonts repository, click the “Quick-use” link, scroll to the bottom, and copy the necessary code.

Step two: Paste the Google font code from Step one into Thesis 2.0 in your WordPress administration area under Thesis, then HTML Head Editor, then Head Scripts.

Step three: Apply the desired font to areas of your site in the Thesis 2.0 interface — the CSS tab of the Skin Editor — in places where you want to use that specific Google font.

Aside from saving, that’s it!

Let’s use a real-world application to make sure these steps are clear.

For demo purposes, let’s use the Google font named “Shadows Into Light” for the Site Title, and the Google font named “Dosis” for the Tagline.

This will take us from a default Site Title and Tagline like this:

Thesis Site Title and Tagline Before Google Fonts

To one that looks more like this:

Thesis Site Title and Tagline After Google Fonts

Step one was to find the Google font or fonts you want to use. The Google Web Fonts are easy to browse.

Once you find one you like — the “Dosis” font family in this example — click the “Quick-use” link as shown below:

Navigating the Google Fonts Repository

Once you’ve clicked into a specific font, note the “Page Load” for a visual idea of how much of a delay you’re adding to your site, then select and copy the the code in the blue area, near the bottom of the screen.

Note that the following image has been modified in order to highlight the more relevant parts for our purposes here.

Google Web Fonts Embed Code

Now you’ve got a Google font family ready to add, then use, in Thesis 2.0!

If you plan to select more than one font, you can easily alt-tab between Google’s Web Fonts and Thesis to add the fonts you want to the 2.0 Thesis interface.

Remembering step two, you should be in Thesis, the HTML Head Editor, and then hover to click the “gear” of Head Scripts as shown below — you may see several more of those dark gray boxes prior to “Head Scripts” — but it’s in there!

Thesis 2.0 Main Interface

Clicking the “gear” of Head Scripts will pop the next screen.

Here you can add as many Google fonts as you like — remember, each font dents your site performance somewhat, and Head Scripts are called globally on your site.

For those not using the ninja pipe* method, you’ll add one font per line:

Adding Google Font Embed Code to Head Scripts in Thesis 2.0

If you’re using this tutorial for testing prior to selecting your own fonts, here are the two lines of code that are shown in the above:

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>

*Optional Ninjitsu: you can combine multiple font requests to eliminate a portion of the performance ding using a pipe delimiter, like this:

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Dosis' rel='stylesheet' type='text/css'>

Either method works — though talking about “ninja pipes” is more likely to impress your friends.

Close this window, Save HTML Head, and you’re ready for the final step — applying these two fonts wherever you want.

Updated needed starting here (reference Skin → Custom CSS instead).

For this example, we want the Site Title and Tagline — so it’s time to click Skin Editor.

Move to the CSS then look for the Site Title &title in the right-hand section of Packages — Site Title is highlighted below.

Selecting the CSS Package to Apply a Google Font

Recall that the two CSS Packages covered in this tutorial are Site Title and Site Tagline — as you’ll see, the only difference of note will be which Google font we apply to each of these.

Click the CSS Package named Site Title &title to open the Single Element Styles pop-up window, click on Additional CSS, and add this line of CSS above the two existing values:

#site_title { font-family: 'Dosis'; }

When you’re done, it should look like this — your new line is shown at the top of the text input in the following image:

Adding Google Font Code to CSS Selector

Save — it’s the green button — and close this pop-up window.

Now for a very similar action. Find the Site Tagline &tagline and click it:

Now Address the Font of the Site Tagline

As with the Site Title, click on Additional CSS and add the following line:

#site_tagline { font-family:"Shadows Into Light"; }

As there are no preexisting values here, yours will likely be the only line of code when you’ve finished:

Same Font Application to Tagline Selector

Save — green button — and close the pop-up window.

Save once more — another green button, Save CSS — and you’ve got a Site Title and a Site Tagline with two different Google fonts!

In Thesis 2.0, there’s almost always more than one way to get the job done.

For example, you could have added these last two lines of CSS to the Custom CSS area of the CSS tab — but it’s good to work with specific CSS Packages, or at least to know how to work with them.

Here’s one reason why.  We changed the font family assigned to our Site Title and Tagline, but we did not adjust the size and other properties of the fonts. If you’re in the CSS Package for either the Title or Tagline, you can make “click-and-go” adjustments to your new Google fonts within the 2.0 interface.  Changes made to the font size (and lots more) will apply just as they would to default fonts!

As an aside, when using Google Web Fonts, you may not see immediate, real-time application of these fonts in the Thesis 2.0 Canvas. To confirm your changes have been applied, be sure to save, then open your site in another browser, or in a new tab of the browser you’re already using.

This tutorial covered two example areas, the title and tagline.

But as you’ve probably guessed, the same process could be used to apply Google Web Fonts to other CSS Packages.

If you’ve requested the Google font in the Head Scripts, you’re a simple “copy and paste” from applying the given font to just about anything on your site.

With over 500 fonts to play with, it’s all but guaranteed you’ll find the perfect look for your site’s most important text!