Tutorial
Add Google Fonts To Your WordPress Theme
With Organic Themes, we believe some functionality should be reserved for plugins, not theme options. Adding or changing fonts within your theme is one of those features.
In this tutorial we will explain how to manually add new fonts within the code using Google Fonts, and how to change fonts using a plugin.
The History of Fonts on the Web
I think it’s important to give a brief history of fonts on the web. Until somewhat recently, changing fonts on a website was limited to only a handful of core fonts for the web. There were workarounds using Flash and images, but it was a painstaking process. With the creation of solutions like the CSS rule @font-face, free solutions like Google Fonts and paid services like Typekit — the web finally became a place for good (or bad) typography.
Of the many new solutions, my recommendation is to use Google Fonts when changing fonts in your theme. It’s free, easy and there are plenty of great fonts available. There are plenty of bad fonts available as well. A lesson in typography may be worth considering if you don’t have a design background. If you do have a design background, but the Google font Montserrat just doesn’t cut it as a replacement for Avenir, than you may want to consider using @font-face. However, it will require a license to use the web font and hosting the font files on your server. Using Google Fonts skips that messy stuff, and that will be the focus of this tutorial.
Manually Adding A Google Font
Within Organic Themes, there are 2 files that will need to be edited in order to manually add a Google Font — the style.css and header.php files. I’m going to cover adding a single Google Font to your theme, but the process is similar for adding a “collection” of Google Fonts to your theme.
This is roughly a 10 minute process. If the manual integration isn’t for you, skip to the plugin section to speed things along.
Okay, let’s dive in:
Step 1. Cruise over to Google Fonts and choose your desired font. This is probably the most time consuming portion of the whole process.
Step 2. When you have found that perfect Google Font, choose the Quick Use button as illustrated below. We will be using Montserrat as our example.
Step 3. On the Quick Use page, select the font weights and styles you wish to use in the theme.
Step 4. Upon selecting your styles, Google will provide code similar to this:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
The code should be added before the closing </head> tag in the header.php file located within the Appearance > Editor section of the WordPress admin, then choosing “Header” from the list of template files on the right. Update the file after the code has been added.
Step 5. Now we need to tell the theme where the new font should be used. That is accomplished within the stylesheet. Still within the Appearance > Editor section, choose “Stylesheet” from the list of files on the right.
Fonts are generally applied to the body and heading classes within the stylesheet. However, there are instances where fonts may be applied to other elements within a theme, such as buttons, forms, etc. Generally, the focus will be on changing the body and heading fonts. As an example, changing the body font may look something like this:
Body class with old font:
body {
font-family: Arial, Helvetica, sans-serif;
}
Body class with new Google Font applied:
body {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
Note: Google Fonts should always be surrounded by single quotations.
Step 6. Update the stylesheet with the new changes, and your new Google Font will be applied to all body text throughout your theme. This same process applies to changing other fonts within the theme.
If your new font isn’t displaying, make sure the font name is spelled correctly, it’s wrapped in single quotes and has a comma after the font if necessary. Also, if you have a caching plugin active, you may need to delete the cache before noticing the change.
Within Organic Themes, every theme stylesheet has a table of contents. The body class is always the first style. This should make it easy to locate your body class and headings for manually changing fonts.
Using A Plugin
If you don’t want to mess with any code, there are plenty of great WordPress plugins available for changing fonts within your theme.
We recommend the Easy Google Fonts plugin. This plugin will load the entire Google Font directory into WordPress. Using the Appearance > Customizer, you can easily change the body and heading fonts, colors and styles within your theme.
Remember to choose your fonts wisely. Legibility is one of the most important factors to consider when creating a professional website. And never use Comic Sans or Papyrus.
