How to Use Google Web Fonts in Your WordPress Website

It’s easy to use Google web fonts in your WordPress website. Google currently has over 500 free fonts in their web fonts library. There are all types from classic to handwritten with lots to choose from in between.

The easiest way to use Google fonts in your WordPress website is to use a plugin. I tried several, but the one I found easiest to use that allowed selection from all the current Google fonts is WP Google Fonts by Adrian Hanft. Go to your WordPress Dashboard, click Plugins, Add New, and search for it. Install and activate it.

Above is a screen shot of the theme changes we’ve been making to the Twenty Ten theme with the Josefin Sans font used for headings. The original Twenty Ten fonts are standard Helvetica Neue, Arial, Helvetica fonts; see the image at the bottom of this post. So let’s get started.

How to Use WP Google Fonts Plugin

In your dashboard, find Google Fonts under Settings. Clicking on it opens this screen.

We want to change the website title, the post and page titles, and the sidebar widget titles. First you want to choose the font from the drop down. I choose Josefin Sans, but Sail, and Great Vibes are nice cursive fonts, and Osborn and Open Sans are alternative sans serif fonts, that would work well in a theme too.

Then check Headline tags (h1, h2, h3); save it, and view your website. For some themes, this may change all the fonts, but for others, like Twenty Ten, we have to edit the CSS too.

CSS for Using Google Web Fonts in your WordPress Theme

Here’s the CSS code that was used to edit the page titles and change their color:

#site-title a, 
.entry-title, 
.entry-title a, 
.widget-title, 
#site-description {
     font-family: 'Josefin Sans', sans-serif; 
     color: #f680bf !important; 
}

So let’s break the code down. The CSS selectors are the labels for each title; see the image below.

#site-title a
.entry-title
.entry-title a
.widget-title
#site-description

font-family: calls the name of the Google font that you chose to use. Put it in quotes; you can also add a fall-back font – sans-serif.
color: calls the name of the font color we chose – #f680bf .

This CSS code will work with many other themes, as well. You can use Color Scheme Designer to help choose a color for fonts for your website theme. You want to use a color in RGB format, as in the code above.