How to Add Google Fonts to Volatyl

The downside (if you want to call it that) to using a WordPress framework is that most of them don’t come with very many design options. It usually takes a skin or child theme to bring it to life.

Volatyl is no different. Child themes are fully supported and should house all design customizations… including the use of custom Google web fonts.

Understand that what you are about to read is not specific to Volatyl. This is WordPress! There are many different ways to add Google Fonts to your website. This is simply the preferred method in WordPress.

How to use Google Web Fonts in Volatyl WordPress

The preferred way to load Google Web Fonts in WordPress is to use WordPress’ wp_enqueue_style() function.

Here’s an example of how Volatyl Themes loads the Oxygen font from Google Web Fonts using the child theme’s functions.php file:

// Load Google Web Fonts
function load_google_fonts() {
	wp_register_style('gfoxygen','http://fonts.googleapis.com/css?family=Oxygen');
	wp_enqueue_style('gfoxygen');
}
add_action('wp_enqueue_scripts','load_google_fonts');

This is just a custom function that first (line 3) registers the font’s CSS file for later use and then (line 4) actually puts it to use.

In this simple example, we’re not doing anything fancy. But think about a situation where you want multiple fonts to display on one specific page. Why should your website load the CSS files for all of those fonts on every single page of your site?

Instead, conditionals can be used in the PHP to only wp_enqueue_style style on pages where you want it to happen. An example you probably never thought about is your WordPress dashboard’s CSS file. It doesn’t load on your website’s front end… and why should it? 😉

How to build your custom font function

Remember, we only work inside of child themes! Learn more.

If you want to use your favorite Google Web Fonts pick, it’s pretty simple. Head on over to Google Web Fonts, make your selection, and go to the page for that font.

On the page for Oxygen, the first thing to see is the different font weights.

Google Web Fonts Font Weight

Don’t ignore this part. Only select the font weights you seriously intend to use. Reason being, the stylesheet gets longer and the font loading takes longer every time your webpage loads.

When you make your font weight selections, the URL of the CSS stylesheet will change. With the normal 400 weight you see above, this is the stylesheet URL:

http://fonts.googleapis.com/css?family=Oxygen

If we select all font weights, it changes to:

http://fonts.googleapis.com/css?family=Oxygen:400,700,300

The difference is clear. The second stylesheet has CSS for all three font weights while the first one only has CSS for the basic, normal font weight.

This URL will be reflected a little ways down the page as seen here.

Google Web Fonts Stylesheet URL

We’re sticking with the standard option to use the wp_enqueue_style() method.

What you need to do is copy that URL from inside of the href='' attribute. That URL is what will be used in the wp_register_style() line of your function. Also, give your style a name. I like to use “gf(font_name)”… so “gfoxygen” for Oxygen.

So with the PHP structure shown in the beginning of this article, line 3 would look like this with the first parameter of the function being the name you made up and the second parameter being the URL of the stylesheet:

wp_register_style('gfoxygen','http://fonts.googleapis.com/css?family=Oxygen');

Now that the font is registered, you need to enqueue it for use. We did that in line 4 with the only parameter being that name you made up to represent your stylesheet:

wp_enqueue_style('gfoxygen');

With your font stylesheet registered for use and then put to use inside of your custom function, an add_action() is needed to run that function, which happens in the last line of code using wp_enqueue_scripts() and the exact name of your custom function as parameters.

Here’s the complete function that’s pasted inside of the child theme’s functions.php file once again:

// Load Google Web Fonts
function load_google_fonts() {
	wp_register_style('gfoxygen','http://fonts.googleapis.com/css?family=Oxygen');
	wp_enqueue_style('gfoxygen');
}
add_action('wp_enqueue_scripts','load_google_fonts');

With that code in place, we are now ready to use the font property and value in our CSS stylesheet of our child theme. Google provides the exact CSS to do this.

Google Web Fonts Font CSS

Using your own CSS selectors, the CSS property and value will work just like any default browser font like “Georgia.”

For example, making all HTML headings (h1 – h6) use the Oxygen font, you would use:

h1, h2, h3, h4, h5, h6 { font-family: 'Oxygen', sans-serif; }

If you chose more than one font weight like both 300 and 400, you would specify which one to use for specific text like so:

h3.special-heading { font-family: 'Oxygen', sans-serif; font-weight: 300; }

That’s it! Despite the length of this article, using Google Web Fonts is incredibly easy. Now that you’ve seen the WordPress way of doing things, you should be happy to know that this doesn’t only apply to using web fonts. You may see this method for other things in your child theme development as well.

Happy coding. 😉

Return to docs