How To Use Google Webfonts In WordPress

Learning how to use Google Webfonts in wordpress, allows you to break free of the humdrum basic fonts that come a with a lot of themes.

Here’s the scenario. Your theme headers use Verdana, a basic sans-serif font, and there are no options in the theme to change it, but you want your headers to show an awesome font called Lobster.

Now you could just edit your style.css, and change the header fonts to say lobster. It works on your pc so why not? Well, thats the problem, your pc has the font Lobster on it because you downloaded it as you thought it was cool. But your visitors maynot have that font, so even though you have changed your css, they will never see the true beauty of that font.

What to do? Easy, use Google’s webfonts service to provide the font for you, so no matter who views the site they will always get the right font served to them, even if they don’t have the font on their pc!

How to use Google Webfonts

First step is to pop over to Google webfonts and pick a font that you want to use. In this example we will use Lobster.

Start by either searching for the font name, or browsing the 500+ fonts available. You can even filter the fonts by type (serif, sans-serif, display and handwriting) and/or the thickness, slant and width.

how to use google webfonts - select a font
Choose a font
how to use google webfonts - google code
Copy the code from Google

Once you have found the font you want to use, click the “quick use” link on the right.

This will show you two types of code that you need to use.

font-family: 'Lobster', cursive;

The first code snippet needs to go into your header.php file of the theme. You can find that by logging into WordPress and clicking the menu option Appearance, then Editor. On the right is a list of the files in your theme, find and click the header.php.

how to use google webfonts - edit header php
Edit the header.php

Once the code for that file appears, insert the first code snippet above the anywhere in the head section between <head> and  </head>

The second snippet needs to go into your style.css file.

The exact place it goes depends on what your are trying to do. Here I will change my header tags (H1 -H6) to all use the Lobster font. So I add the following code to the bottom of my css file (or change it as needed).

h1, h2, h3, h4, h5, h6 {

font-family: 'Lobster', cursive;

}
how to use google webfonts - edit stylesheet
Edit the stylesheet

You can do this for anything in your site: all the body text, specific headers, all the headers, etc.

Here’s what ApinaPress would look like after using the above code.

how to use google webfonts - what it looks like
I was tempted to leave it like this!

 

What about in a child theme?

Copy your header.php from your parent theme to the child theme and add the google webfonts code to that.

 

So now you know how to use google webfonts in wordpress, how are you going to make your site look awesome?