How to Easily Use Google Fonts in WordPress

By / Jun 5, 2014 / Tutorials
shares

The CSS3 @font-face rule and services like Google Fonts have really opened up the doors for people to be more creative with web typography. Google Fonts has over 630 fonts available to choose from, and in this article, I’m going to show you an extremely easy way to use them in your WordPress site – not all of them at once, of course. Because that would just be crazy.

On the Google Fonts site, they do a good job of providing instructions that are simple and straight forward. However, following their instructions requires that you modify the header.php or functions.php files of your WordPress theme to import the fonts. And you’ll also need to add the necessary CSS to the style.css file. While this isn’t an extremely difficult task, there is a better way.

First, you’ll need to download and install the Google Fonts plugin from ThemeTrust. The cool thing about this plugin, is that it integrates directly with the WordPress Customizer, allowing you to instantly see how your typography will look as you set your fonts.

google font plugin

Once you have the plugin installed, go to Appearance->Customize, and click on the Google Fonts for ThemeTrust tab.

google fonts plugin

Within the panel, you’ll see eight different sections:

All Text, Paragraph Text, Header 1, Header 2, Header 3, Links, Blockquote, List Item

In each section, you can select a font and set the weight for that font. There is also a field to enter custom CSS selector. So for example, if you wanted to only set a custom font for the h3 tags in the footer, you would enter something like this in the Custom Selectors field in the h3 section: #footer

You can also add multiple selectors by separating them with commas, like this: #footer, #sidebar

Conclusion

As you can see, this is a much simpler solution for using Google Fonts in your WordPress themes, especially for those who don’t want to get their hands dirty by editing theme files. And having the options integrated directly into the WordPress Customizer allows you to quickly see what fonts will and won’t work with your site.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

5 Comments

  1. Blake
    June 5, 2014

    I’m willing to give it a go, but is it really a better way than just adding it to the functions.php and stylesheet? How much increased javascript is in there to load this plugin? If I can easily do it another way without increasing the amount of items that need loaded and reduce my load time I will take it.

    Reply
  2. Jay Mayu
    June 6, 2014

    I’d rather link it in my style.css (with @import command) and then use it at my will. Never bothered to download and check via the plugin.

    Anyway nice find and thanks for sharing with us.

    Reply
  3. Vicki
    June 6, 2014

    I wouldn’t ever use this plugin for a site that I’m maintaining myself, but it strikes me as being useful for folks who aren’t comfortable with futzing around in the code for their sites. I could imagine building support for this into a theme that is intended for use by non-techy site owners.

    Reply
  4. Aamir Shahzad
    June 6, 2014

    Wasn’t expecting this kind of article having title “How to Easily Use Google Fonts in WordPress”.

    Reply
  5. Teelah
    June 9, 2014

    Well this just saved me a lot of time. I love google fonts but not enough to go through all the hoops that I thought I had to jump through, this is much easier. (didn’t want top have to modify the header.php or functions.php files on top of the css, so many steps).Thanks for the share! ThemeTrust is an excellent site too with so many cool little tricks. The best part is that most of the plugins are free!

    Reply

Leave a Reply