Add Google Fonts To WordPress Using A Hook Plugin

There’s many different ways to add fonts in WordPress.

It really depends on where the fonts are coming from.

You can add Google’s free fonts or any other custom fonts.

Regardless of whether they are free or premium.

You can install your fonts using any of these methods:

• Using font plugins
• Creating a custom function and using your theme’s action hooks
• Installing a hook plugin (easier & no coding needed)
• Using your style.css file

I’ve already shown you how to install and add different types of fonts in WordPress using all these methods except for the the hook plugin method.

In this tutorial. i’ll show you how to install and add Google fonts using a hook plugin.

This method ensures you fonts load immediately before you theme’s style.css file which is the best for performance.

Hook Plugins

Find a hook plugin which works with your theme.

• Genesis simple hooks plugin.
• Thesis hook plugin and
• Woo framework includes a hook manager.

Most other good premium themes will include a built in function for using action hooks.

Google Fonts Code

Go To Google fonts and search for your fonts.

Next step is to grab the url to the fonts.

Click the Add to Collection or Quick Use links.

Choose the styles you want installed on your site. (Some fonts include multiple styles).

Go to step 3 and grab the url for the standard code.

Add Code To Action Hook

Next step is to paste this code into your hook plugin field.

Different themes offer different action hooks however they should all provide a hook for the head and document sections.

For Genesis users, you can choose either the:

genesis_title Hook or genesis_meta Hook

Personally i choose the title hook over the meta hook because it loads before the child themes style.css file as you can see in this screenshot below.

Checking Your Code

Click Image To Enlarge

You can now right click your homepage and click View Page Source to see the code you added to your document.

I’ve added the code on 2 of the hook locations as a test.

Once you enlarge the screenshot above, you’ll see the Google url has been added using the Title hook and Meta hook.

The Title hook loads the Google fonts first however the meta hook loads the fonts after the theme’s style.csss file.

Using Custom Functions & Action Hooks

If you prefer using code in your child themes functions.php file, you can write a simple custom function and hook it in using any of your themes action hooks.

Hooks are theme specific and your theme’s support forum or users guide should supply this tutorial for you if they are a good theme developer.

An example of what this custom function would look like is:
/* Load Your Google Fonts
———————————————————— */

add_action( ‘genesis_title’, ‘load_google_fonts’ );

function load_google_fonts() {
echo ‘<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Play” media=”screen”>’;
}

Import CSS Method

Are you using any of  the premium child themes like StudioPress, Woo themes or Kolakube?

If so, you’ll find your theme is using the import method at the start of your child theme’s style.css file

Example:

/* Import Fonts
———————————————————— */

@import url(http://fonts.googleapis.com/css?family=Play);

Even though this isn’t a bad idea, your fonts will load faster using your theme’s title or meta hook rather than waiting for the style sheet to load which comes after your title loads.

Video