It doesn’t get much better than free fonts. Add a reliable source like Google’s font service with over 600 fonts to choose from, and the possibilities for pairings are endless!
Since the launch of the Google fonts service, many of my developer friends and DIY WordPress friends have asked me how to use Google fonts in WordPress. The answer is so simple it may surprise you! In fact, there are multiple ways and they are all easy.When you’re done with this post, you’ll be empowered to beautify your own site with any font from Google fonts.
How to Select Google Fonts to Use
While browsing fonts in Google, click the blue Add to Collection button on the fonts you wish to use. You can select multiple fonts, so go ahead and get a couple that work together. Youíll see a gray box popup at the bottom with a list of the fonts youíve collected. When you are finished choosing your fonts, click the Use button on the right side of this gray box. If your selected fonts come with additional styles and weights, you will be able to select those on this page.
Importing Google Fonts to WordPress
There are two main options for importing your selected fonts to WordPress. (If you use a Genesis child theme, there are special instructions just for you.) Read through your options below, and select one to follow before moving on to using the fonts you’ve imported.
Option 1: Using the Standard Method to Import a Google Font to WordPress
This is my favorite method because it is fast and doesn’t require the browser to download the font file before loading the web page. This method isn’t used as often as the @import option, which is easier to implement, but much slower to load.
Here’s how to do it:
After you have selected your fonts and the styles you wish to use, scroll down to the third box. It should have three tabs across the top and contain code.
Select the Standard tab and copy the code to your clipboard. The code will look something like this:
Paste this code into your theme’s header.php file above the call for your theme’s stylesheet.
Note for Genesis child theme users: Most child themes do not contain a header.php file and you don’t want to modify the header.php file for the framework, so you’ll need to go about this a little differently for a child theme.
In your child theme’s functions.php file add the following, being sure to update with the code from your own font choice:
Option 2: Using the @import Method to Import a Google Font to WordPress
This method is a lot easier to implement, but it can slow down your site a little. I donít consider it a big enough difference to be an issue for a small site, so I often recommend this method of importing Google fonts to WordPress to DIY theme modifiers.
Here’s how to do it:
After you have selected your fonts and the styles you wish to use, scroll down to the 3rd box. It should have 3 tabs across the top and contain code.
Select the @import tab and copy the code to your clipboard. The code will look something like this:
Put this code near the top of your themes stylesheet (usually named style.css) – above where the styles start and below any information about the theme. Here’s an example:
Using Your Imported Google Fonts in WordPress
After you have completed one of the import methods above, you can use the fonts in your stylesheet (usually style.css) like so:
Keep in mind, you will need the single quotation marks before and after the imported font names as shown in the example.
Use the fonts anywhere you’d like in your stylesheet. If you’ve imported 2 or three fonts you can use them in different places!
Bonus Method: Using a Plugin to Import Google Fonts
There are a lot of plugins available to import Google fonts. They are shiny and very appealing to DIY folks who don’t want to touch their theme’s files. As a developer, I don’t use extra plugins if I don’t have to, but I wanted to let you know about this one in case you choose to do so.
Install the Easy Google Fonts plugin.
Configure according the the instructions in this video.
Go Font Happy!
Now that you know how easy it is to incorporate Google fonts into your WordPress theme you can have a lot of fun! Just remember, design and decor are not the same thing. Keep to two coordinating fonts, three at most. Let one be for titles and special highlights, and pick a complementing body font that is easy to read.
This post is sponsored by GoDaddy and the BlogHer network. I’m grateful for the opportunity to share my knowledge and would love to know if you found it useful!
GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click hereto experience the difference.