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, 2014 by in Tips & Tricks | 50 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.


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 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.

    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.


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.


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

download divi


  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!


  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!


  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.


    • I too find it frustrating that we cannot simply disable Google Fonts – I don’t particularly want to load in the amount that Divi does (even when disabling subsets) – just the Open Sans fonts is in the red page load speed wise. Divi needs a smarter, more efficient way of pulling in GFonts.

  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. ?


  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/

  18. How to use different font-family with server request

    without using google font and @font-face

  19. Hi Nick,

    great article! I have used your themes on many websites, you make beautiful designs. :)

    I have attempted your method on my website hawtinconsulting.net

    I used this code on the .php file:

    function load_fonts() {
    wp_register_style(‘et-googleFonts’, ‘http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900’);
    wp_enqueue_style( ‘et-googleFonts’);
    add_action(‘wp_print_styles’, ‘load_fonts’);

    And for the css I used a class:

    font-family: ‘Source Sans Pro’, sans-serif;

    But I cannot seem to get it to work. My html reference is:


    Do you see anything obviously wrong with the code?



  20. Hi Nick

    Just working on my first Divi 2.2 site – loving it! Can you let me know what is the precise name of the default fonts used in the theme are? When I go into Appearance – Customise – Fonts, all the theme fonts are listed by name, except the default fonts… I’d love to use the same fonts on our printed matter.

    Thanks for your help!


  21. Hi Andy,

    Option 3: Use Our Themes – that’s what I am doing. Using Divi.

    But the google fonts are only working with safari browser and not shown in chrome, firefox an opera on mac. Do you know this problem and is there a solution?

    Thanks for your help.

  22. Just followed instructions and edited the code on my site and now it’s broken! Nothing but blank screens!

    • You have to edit the code copied from Google Fonts so it matches the way it appears in the php code above (ie: delete tag etc. Carefully match the format and it works.

      Also make sure you paste it in the correct place in the php file. It should be before the ?> tag at the end. (I’m a php no idea so assume you are too).

      • Good day Sarah
        I’m off the “theme” now…but related to WP: I’m new to WP and in layman’s terms; a dumb blond: My theme has typography support. I need to edit the text size on a single page and I’m altering the text size as follows= Customizing>Typography>Default Typography>Appearance>Font Size slider. As soon as I use the slider, all the other pages font size changes as well, which I do not need to change. Do I need to create a custom font control on the Google fonts screen, in the Easy Google Fonts>settings> Custom CSS field section for each page, or is there a simpler method? If I need to add custom CSS codes for each page(preferably Roboto font), please provide me with the css codes, and, if possible, a short explanation how to edit the custom CSS fields, as I have no idea how to perform such. I have watched hordes of tutorial videos, but all of them only shows how to edit the text field of the home page. I currently have multiple pages. I looked at Andy’s explanation above to copy the first code; but, to where? Do I need to go to Dashboard>Appearance>Editor, then on the right side of the screen, to functions.php to copy the codes to? I’m currently working “offline in WAMPserver before I upload to Cpanel to go “live”.
        Kind regards, Hendrik

    • White screens on editing pages for me too, I had to go into the functions.php file via my website Control Panel in order to delete the cut & paste from above – I guess there’s a closing bracket missing, although I’m not familiar with php code.

  23. Thank you. Easy and it worked!

  24. I dont know whats wrong, but when I go in to the customizer, I can change the font but I am not seeing a preview of the font (to see what it looks like) before selecting as is in the picture example of this blog. I tried Chrome, Safari and Firefox and I still cant see the font preview in the dropdown on the left. I see the names of the fonts – just not the font itself. It takes forwever to load and save a font, and then refresh to see how it looks. Am i confusing anyone with all this?

  25. Hi,

    I also use the Option 3 but nothing seems to work (IE, Firefox, Chrome).
    Someone have I idea?


  26. Easy Google Fonts plugin is Super easy plugin to add google fonts and the support is quick and good. I can recommend it to everyone!

    • What am I missing then? All I get is a page telling me to create font controls whatever they are. It advertises as needing no coding knowledge. What is a ‘font control; and where is the list of fonts I should be selecting?

      I think it’s total rubbish – I will go back to using good old HTML to state fonts and sizes. Another useless plugin in my view.

      • Pete,

        I couldn’t agree with you more! I’ve noticed that no one has bothered to answer your comments and questions, which means there is likely no hope for me either. But, you are absolutely right.

        The claim that “no coding experience is needed” is about as honest as a politician. The widget requires “font controls” which are css snippets, which are code snippets, which would require the plugin user to be familiar with coding. If you walked out of your house and asked the first 20 people you saw,”How do I find the appropriate css stylesheet code snippets to correctly identify the parts of my WordPress site which I’d like to update with the Google Fonts I’ve chosen?”–No one would have any idea how to answer that question (even if you showed them your computer) and most of them (if not all) would have absolutely no clue what you were even talking about… you could be asking about brands of dog food for all they’d know. The only people who’d have any idea of how to complete the “font controls” would be web developers or coding enthusiasts.

      • Hey Pete,

        Not sure if you’re still struggling with this issue or not, but I found the first useful article on decoding the not so “Easy Google Fonts” plugin.

        When using this plugin and the Divi theme, you can edit the basic text modules from the theme customizer. But you can’t edit any other modules with creating “Font Controls” within the plugin’s settings (as you already know). To create a font control, you have to understand and be able to correctly work with the CSS stylings–specifically CSS selectors. Apparently the CSS selectors are the snippets of CSS code that point to each part of your website’s style. For instance, within the Divi theme one may need to create a font control that lists selectors for headings plugins, titles, etc. and each selector must be separated by commas within the font control. This is information you probably already knew. I’m assuming your issue is the same as mine, in that you have no idea what the CSS selectors are that you need to locate and put into the font control.

        This article on CSS selectors was extremely helpful for me and really the only article I found that offered simple guidance.


        The information found in the article above helped me to understand what CSS selectors were, which ones I would likely need to use and whereabouts to find them within the CSS coding.

        Using this information, I went to the CSS style coding for my Divi themed WordPress site, found here [WordPress Menu] Appearance>Editor>Stylesheet (style.css). *Note: Editor opens to the stylesheet for me, but I don’t know if that’s the same for everyone. With the information from the help article, I was able to locate the correct CSS selectors for the areas which I needed to update with my new Google Fonts choices.

        With my selectors found, I went back to the plugin’s setting and created my first font control. It seems to have worked! I’m definitely keeping a record of the selectors I used and the process needed to make these updates, so that should I have to do this again, I’ll have an easier time trying.

        I hope this helps!

  27. I get nothing like this. All I get is a page asking me to ‘Edit Font Controls’ whatever they are. No instructions – no help. Seems useless to me, so what am I missing?

  28. Hi!
    I use Divi Theme and I love it, but there’s not the font I use in my banners, which is a Google Font. I tried playing the CSS but nothing works.

    Also, I have troubled with spacing between lines.. any tips on that? Thank you. :-)

  29. Hi I am interested in using external web-fonts that are NOT from Google. I found a cool font that I need to purchase separately and then install on the webserver. What is the best way to use this font in the Divi theme?

    Does anyone have practical experience with using external (non-Google) fonts?


  30. I just read on WP Beginner (in the comments) that wp_print_styles has been deprecated since WP 3.3. Several people said to use wp_enqueue_scripts instead, so they updated their tutorial.

    I thought I’d mention that here.

  31. Hi,

    I try the option 2. Is it normal that I have to put a “!important” in the css file for this to work?

    Like this :
    body {
    font-family: ‘Chivo’, serif !important;
    font-weight: normal;
    font-style: normal;

    Do you plan to include other Google fonts like chivo?

    Thank you.

  32. There are 2 Google Fonts that I love and unfortunately, neither one is on Divi. I ended up choosing from the options Divi had available and it was okay… but I didn’t love it like I wanted to LOVE it. I hoped that the fonts I ended up settling for would eventually grow on me, but they haven’t, I still want the Google Fonts I originally fell in love with.

    Having said that, I hate coding! I have done a little bit of coding here and there throughout the years when I had no other choice and the directions were impossible to screw up. After devoting so much time and effort into my site, I just want to use my fonts without destroying what I’ve built… I feel like it shouldn’t be so hard, but it is.

    So far, I tried doing some coding to get my fonts (based on this article), but when it came to the css style sheets, I have no idea what I’m doing and I got scared I would destroy everything so I stopped. Next, I tried a plugin, but that still required me to know about css. It was able to change some of the text through the customizer, but only the basic text modules. None of the other modules were changed.

    Is there any real way for people who are NOT coding experts or css aficionados to get a couple of Google Fonts to work on a Divi theme?

Leave a Reply

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

Join 307,026 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

Share This