How to add Google Fonts to WordPress (Self-hosted)

How to add Google Fonts to WordPressThis will show you how to add Google fonts to WordPress (self-hosted) with an easy-to-use plugin and some basic CSS skills.

Self-hosted WordPress users can add some serious spice to their font choices by accessing the plethora of awesomeness in Google Fonts.

WordPress.com users will need to purchase the custom fonts upgrade to get typekit fonts. No Google fonts for you sorry.

How to add Google Fonts to WordPress

NOTE: Every font you add will slow down your site a little so make each one count.

1. Install the Google Typography plugin.

Navigate to Plugins >> Add New and enter the term ‘Google Typography’ into the search field.

After activation go to Appearance >> Typography.

2. Choose a Google font.

Click the Add New link.

Google Typography Add New

Choose a font from the drop-down list then select a variant, size and color. You can enter specific text in the top field to see exactly what it will look like on your site.

Google Fonts Chooser3. Assign a CSS selector to the Google font.

Open a new tab in your browser and decide which font style you would like to apply this to.

A key tool you will need for this step is called Firebug. It’s an addon for Firefox and Google Chrome.

After Firebug has been installed, right-click on the page element you want to apply the font to and select Inspect Element with Firebug.

Inspect Element with Firebug drop-downA window is going to pop-up. On the left is the HTML, and on the right the CSS selectors that apply to area that’s highlighted.

Make sure the element you want to edit is highlighted then copy and paste the CSS selector that appears at the top of the right-hand window.

CSS Selectors Firebug

In the example above, the CSS selector we would use is:

.entry-header .entry-title

Paste the selector into the CSS field and click Save.

CSS Selector Page Titles

4. Preview your changes.

Page Title Display - Google Typography

Common CSS selectors

Below you will find some of the most used CSS selectors that (should) work for most themes.

Main body font:
.body

Page Titles:
.page h1

Widget Headers:
.widget h3

Heading Tags:
h1
h2
h3
h4

Using these selectors will have a more general effect. To change more specific elements, like only page titles you will need to use the Firebug method shown above.

Google Typography Plugin Tutorial

Video created by the plugin author Eric Alli.

Some Google Fonts Resources

If you had any issues with this guide please let us know in the comments. Or you might just want to show off your new Google fonts for some feedback! :-)

No comments yet.

We'd love to know your thoughts...