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.
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.
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;
}
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.
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?
09/18/2012 @ 8:52 am
I did not know that. That was helpful. I have always come across the default fonts as a hindrance in designing of the blog. Using Google webfonts just might help me! Thanks!
09/18/2012 @ 9:36 am
No problem, glad it helps. There are other ways of changing fonts, such as Cufon, but I find Google Webfonts to the be the easiest by far.
09/18/2012 @ 2:35 pm
Great post, now I can change my site to look more unique. I was wondering the best way to do that so thanks for sharing your knowledge.
09/18/2012 @ 3:26 pm
You’re welcome Mark
09/18/2012 @ 8:12 pm
Thanks Dean, this is really helpful. I was just wondering though, if while my page is loading fonts on the web must be located, will it affect the load time?
09/18/2012 @ 11:19 pm
Hi Jim, thanks for the comment.
Generally no, with the speed of Googles cdn, and caching systems, using Google webfonts wont slow your site noticeably.
What will do it though is using a lot of fonts, or different styles of the same font. When you click the quick use in Google webfonts, it actually shows a little speedometer type thing to tell you how it will affect load times (green = good). So long as you limit the number of fonts you shouldnt run into problems.
My general rule of thumb is one or max two “special” fonts for headers and a standard font for the body text (arial, verdana, times new roman, etc). That way you can spruce up the site, but keep the load times down.
09/19/2012 @ 1:05 am
Thanks a bunch Dean! That is really helpful to know. I hate waiting as so many people do. So, I have been trying to streamline and get my load times way down. At the same time I would like some distinction on my site. Hence, this is really helpful.