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 Coolors and Contrast Ratio 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. Be sure that you have enough contrast with the background too.

The following image shows the original text for the Twenty Ten theme; it’s been labeled to show you the CSS selector names for the titles of the theme that the code changes.

The color change refers to all the areas listed. The “a” after some of the elements means that the change affects a link. For this first edit, we kept the weight of the fonts (bold in some places) and the sizes of the fonts the same as the original Twenty Ten theme. We would probably want to vary these and change some more of the link colors too.

WP Google Font allows for up to 6 fonts to be added or changed. Six is a lot though; each font called takes time to load on the web page.

The WordPress Customizer allows for custom Additional CSS now, so we’ll use it to make more changes to our theme. That’s coming next!