Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Use Google Fonts On Your WordPress Website

Posted on August 8 by in Tips & Tricks | 24 comments

How To Use Google Fonts On Your WordPress Website

Google has been supplying the community with a large collection of web-based fonts for quite a few years. There are several ways Google allow you to implement these fonts for free on your website. Today I will speak on how to optimize your WordPress website to include Google Fonts using each of these methods.

The Fonts

If you’ve never heard of Google web fonts, then take a long look at the Google Fonts library to better understand what I am referring to. At the time of this writing there are 647 font families available on the website. You can filter by specific categories and font characteristics.

Categories include:

  • Serif
  • Sans-Serif
  • Display
  • Handwriting
  • Monospace

Characteristics include:

  • Thickness
  • Slant
  • Width

You can also narrow down the type of script (this helps for translation purpose and for alternate stylings)

  • Cyrillic
  • Cyrillic Extended
  • Devanagari
  • Greek
  • Greek Extended
  • Khmer
  • Latin
  • Latin Extended
  • Vietnamese

With a bit of background on the site we can move forward to how to integrate them into your WordPress Website.

Option 1 : Plugins

There are a number of plugins available that offer seamless Google Font integration. Most simply require installation, activation and font selection.

With plugins are there some limitations. While the integration part is easy, the hard part comes when you want specific text on your site to be a font of your choice. A plugin typically won’t know to look for this specific type of text without customizing even further with something like CSS and/or HTML classes. With that aside, here are some notable options for using a plugin to include Google Fonts into your site.

WP Google Fonts

This plugin is a simple and efficient way to embed Google fonts of your choosing to your website with a few clicks of your mouse. Within the plugin you can customize CSS styles to adapt them to your theme or use your own stylesheet to do the same. This can be acheived either from your admin area or straight inside your website’s stylesheet. This plugin really is all you need to get Google Fonts on your site quickly.

Easy Google Fonts

The Easy Google Fonts plugin adheres to the WordPress novice in that you don’t need to touch any code to get the fonts live on your website. Fonts can be chosen, optimized, given unique colors and styles all with a live preview. Inside the WordPress Customize section you can easily tailor fit the typography of your site.

Option 2: Modify Some Code

If you have built a website before, you may have adopted some standards for implementing stylesheets along the way.

font-link

Copy the stylesheet link above.

Google provides instructions for embedding their stylesheet links for each and every iteration of its fonts. The instructions and stylesheets work wonderfully on static based websites that don’t utilize WordPress, but fail on WordPress based websites. Don’t worry too much about this as I’ll provide a work around that makes the stylesheet load with little effort from you. I just wanted to establish that getting Google Fonts to work with WordPress is what we are after.

WordPress is a dynamic platform that makes use of code in multiple ways. Rather than authoring every single page of your website you can use WordPress to produce specific templates that get generated automatically.

Why am I explaining this? If you think of how a stylesheet is embedded inside a basic HTML page, it will need to be copy and pasted over and over again to each on every HTML file of your static site. With WordPress this can be automated which we will do with our Google Font stylesheet so it gets injected to each and every page we want.

Finally to the Coding

To do this we first need to get a stylesheet link from Google Fonts. I’ll be using Open Sans for this quick tutorial.

Inside of Google Fonts you’ll want to search for Open Sans and click Add to Collection. Before (or after) this step I’ll mention that you can choose what weights and types of the selected font you would like to make use of on your website. The more variations you use and the number of web fonts you include will weigh in on your website’s speed, so definitely keep this in mind. Google does a good job documenting the load time with their Page Load graphic seen in the image below.

open-sans-selected

Open sans with different weights selected.

A good rule of thumb with web fonts or any fonts for that matter is to select no more than 3 for the entire website.

I personally never go above two different fonts on a website. With different weights and styles, there’s really no need to use that many different fonts, plus your website will load that much faster.

After selecting the weights and styles of your fonts, scroll down and copy the line of code which looks like this:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>

You will probably also notice the familiar CSS styling like this:

font-family: 'Open Sans', sans-serif;

We will make use of this when we define some styles in a moment.

Make sure you have copied the first line of code. Then head to your WordPress site and find your theme inside /wp-content/themes/yourtheme. You will need to open up your site in some sort of code editor. You can use any type of editor so long as it suits your needs.

Inside your theme you’ll need to find a file called functions.php. Head to the bottom of the file and add the code you copied for now.

Around that code you’ll need to add this function.

function load_fonts() {
            wp_register_style('et-googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300');
            wp_enqueue_style( 'et-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts'); 

The function above makes use of `wp_enqueue_style` which is basically just telling WordPress to spit this stylesheet out inside the header of every page of your website. This small chunk of code eliminates the copy and pasting chose I mentioned earlier.

Since I told you to paste the stylesheet you copied from Google you’ll notice that there is a little extra information in which I trimmed off inside the function. You’ll need to do the same thing so that all that’s left is the web link to the actual stylesheet.

Save your file and head to your main stylesheet CSS file. Inside this file you can alter any typography to include your new Google Webfont. To do this you’ll need to add a font-family declaration to the existing CSS. Hear’s an example you can add to test things out:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #000000;
}

Save your CSS file and head to your site. If everything worked like it was supposed to you should now see that your website’s main body copy has been updated. This text could include all un-targeted heading tags, paragraph tags, links, etc…

Since we downloaded both bold and italic variations of the font you can also make use of those using the new Google Font like so.

.italic-text{
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

Inside the link we copied from Google are embedded pre configured styles from the stylesheet associated with our font. Rather than having to do extra work, Google does the work for us by letting us use basic CSS alongside our new Google Fonts.

This method works for any font on Google’s Font directory. We used a basic enqueuing function to deliver the necessary styles to every page on our site. This function allows for a super efficient and D.R.Y.(Don’t Repeat Yourself) approach to implementing code into your entire WordPress website.

Option 3: Use Our Themes

Our themes support quite a few fonts from Google automatically. Below you’ll see our new theme Divi 2.0 which makes use of these fonts. Select an option inside the WordPress Customize section of your admin area and you’ll see options to pick from a great selection of fonts. These fonts can be customized for headers and body copy. You can also choose to target specific styles for different scenarios, but this requires some custom CSS as well.

wordpress-divi

Our Divi 2.0 theme with customizable webfonts built into the WordPress customizer.

Out of the box our themes are built to be customized to your specific needs. Rather than searching for plugins or diving into unchartered waters with PHP and CSS code, make it easier on yourself with Elegant Themes.

Conclusion

As you can see, there are several ways to make use of the growing library of Google Fonts. Integrating new fonts into a website can improve the experience overall by adding a bit of flare to each and every website out there. In certain situations, Google Fonts aren’t required, but at least now you hopefully know how to make use of this great resource from Google.

Feature image via shutterstock author Crystal Eye Studio

24 Comments

  1. Using Google Fonts can make a huge difference for your website. If you use the font for both your logo and branding as well as your website then it increases trust for your website.

    Fonts should be strongly considered when building a website.

  2. I love fonts and using different ones. The only problem I have is there are too many to choose from. :-)

    Thanks for the coding info.
    My next project is going to use Divi 2. My client thinks the Divi theme rocks!

    Cheers
    Dwight

  3. I’m only using 1-2 Google fonts on my site but Divi comes loaded with dozens of them.

    Does having all these Google fonts in Divi have any impact in terms of server load (and therefore page load speed)? Should I remove the ones I know I won’t need, and if so, how do I do this?

    Thanks again for another great article Andy — always appreciated.

    • Divi has dozens of choices, but only the font you choose in the customizer is actually loaded.

  4. I wish Divi 2.0 had more font to choose from. Or maybe I’m just too picky.

  5. Nice article… I love the fact that ET has become more than just a the,e shop.

    Unfortunately this is one of the things that it will get abused by amatuer site admins, and cause all sorts ot site slowdowns. I think the most important point was “A good rule of thumb with web fonts or any fonts for that matter is to select no more than 3 for the entire website.”

    I can’t stress enough the point to carefully debate if you want to use web fonts, as each is over 100kb on average. As far as ET themes go, the fonts are always nice and carefully chosen, and if you want to just adjust the color or size (specially with the older themes), you can do it with simple css, no need to load a web font just for those kind of adjustments.

    I know that my customers love to abuse the amount of web fonts to use, since it’s so easy for them to do with a plugin (I use Easy Google Fonts btw…).

  6. Thank you so much for this. I have a Word Press site with a new theme I installed (I’m about to “relaunch” my blog) and I was trying to change the font within the editor and style sheet and it just wasn’t working.

    I installed the plugin and presto chango I had my desired font in no time flat! Brilliant!

    Thanks!

  7. Hi guys,

    Thanks for these tips. But I find it negative that we can’t deactivate Google fonts to improve server performance. For instance regarding Aggregate, we haven’t the choice to use a common font to don’t load a web font. And there are many requests for each web font, not so optimized.

    Another point is that you don’t add new webfonts on old themes like Aggregate. There isn’t Open Sans… Limited choice. But thanks to underline this possibility.

    Cédric

  8. Another great article Andy. Do you now how to incorporate another Google web fonts into the ET customizer? For example, the font Oxygen (http://www.google.com/fonts/specimen/Oxygen) is not there in the ET font library . Is there a way to include this too in the library. ?

    Thanks

  9. Hi Andy
    Good in-depth overview and I particularly like Option 3… Use Our Themes.
    Always good to know the alternatives though.

  10. Good article, for those more comfortable with code there is also the force font option which is even better as you then don’t have to rely on Google as the font is already directly loaded from the website files and means you can use just about any font you like.

  11. How do we load new fonts into an ET theme so that it appears in the customizer?

  12. Andy,

    Is it true, adding google fonts to website/blog have positive impact in Google SERP’s?

    • It shouldn’t have an effect either way, unless for some reason switching to Google Fonts from a different service improved your loading times dramatically due to the other service’s shortcomings.

  13. Tell me one thing why haven’t you listed @font face technique which is suggested by Google page speed and gtmetrix. Let’s say if my font is font awesome then I choose to have 300 and 400 font weight. Then my standard link will be this. If I copy and paste the link “”http://fonts.googleapis.com/css?family=Open+Sans:400,300″”

    in the browser I will get my

    @font-face {
    font-family: ‘Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local(‘Open Sans Light’), local(‘OpenSans-Light’), url(http://themes.googleusercontent.com/static/fonts/opensans/v9/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format(‘woff’);
    }
    @font-face {
    font-family: ‘Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(‘Open Sans’), local(‘OpenSans’), url(http://themes.googleusercontent.com/static/fonts/opensans/v9/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format(‘woff’);
    }

    • Sorry I have listed out font awesome but it’s open sans. Sorry once again.

    • I’m pretty @import is still a http request that needs to be made, so I don’t believe it would change things either way. Could be wrong though.

  14. Haha .. so we have to find the best Page Load Time font for better Google SERP’s

    Thank You Nick

  15. Hello.

    What if I want two fonts for my site? That means two URLs right? Where should I put the second one in the function? Thanks in advance.

  16. If you did an article on using the myfonts webfonts…that would be great!

  17. This is a great article, even though I am a web developer with coding experience, there are situations when using a plugin is just good enough.However some situations call for digging into the code. Once again great article from the guys at http://young.bizanosa.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Join 253,319 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Shares
Share This