WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add Google Web Fonts in WordPress Themes the “Right” way

How to Add Google Web Fonts in WordPress Themes the “Right” way

Last updated on September 4th, 2015 by Editorial Staff
154 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Google Web Fonts in WordPress Themes the “Right” way

Google fonts are amazing free resource for web designers. In WPBv4, we have started using a popular Google Font combination: Oswald and Lora. Some of our users have asked us how to add Google Web fonts in WordPress themes. If you remember, we showed how to add Google fonts in WordPress Post Editor. In this article, we will show you how to add Google Web Fonts in your WordPress themes the RIGHT way, optimized for performance.

Find the Google Web Fonts that You Like

First thing you need to do is find a Google font that you like. Head on over to Google fonts and browse through the library. When you find the font that you like, click on the “Quick-use” button.

Quick use fonts from Google Fonts

Once you click the quick-use button, you will be taken to a new page. Scroll down till you see the usage instruction box with code that you can add to your website.

Google font embed code

You will see that there are three different tabs for adding the font to your site. The first one is the standard and recommended method to add Google fonts to your site. The second tab uses the @import CSS method, and the last tab utilizes the JavaScript method.

We will show you how to use each of these methods and what are there pros and cons.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding Google Web Fonts in WordPress Themes

We have mostly seen folks using the first two methods.

The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this:

@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);

You can also combine multiple font requests into one. Here is how you would do it:

@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

If you MUST use @import, then at least combine multiple requests into one.

Performance Optimized Method of Adding Google Web Fonts

The best way of adding Google fonts is by using the Standard method which utilizes the link method instead of the import method. Simply take your font URL that you got from step 1. If you are adding multiple fonts, then you can combine the two fonts with a | character. Then place the code in your theme’s head section.

You will most likely have to edit your header.php file, and paste the following code above your main stylesheet. The example would look like this:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

Basically the goal is to put the font request as early as possible. According to the Google Web Fonts blog, if there is a script tag before the @font-face declaration, then Internet Explorer won’t render anything on the page until the font file is done downloading.

Once you have done that, you can simply start using it in your theme’s CSS file like this:

h1 {
    font-family: 'Oswald', Helvetica, Arial, serif;
}

Now there are a lot of theme frameworks and child themes out there. It is NOT recommended to modify your parent theme’s files specially if you are using a theme framework because your changes will be overridden the next time you update that framework. You will need to utilize the hooks and filters presented to you by that parent theme or framework to add Google fonts properly in your child themes.

Properly Enqueuing Google Fonts in WordPress

Another way to add Google fonts to your WordPress site is by enqueuing the font in your theme’s functions.php file or a site specific plugin.

function wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Don’t forget to replace the font link with your own.

Loading Google Fonts Using JavaScript

For this method you will need to copy the code in the JavaScript tab in Google fonts usage instructions section. You can paste this code in your theme or child theme’s header.php file immediately after <head> tag.

Our last tip on using Google Web Fonts on your site would be to don’t load fonts you won’t use. For example, if you only want the bold, and normal weight, then don’t add all the other styles.

We hope that this article helped you add Google Web Fonts in your WordPress themes the right way, so your site can load fast. You may also want to check out our guide on how to add Typekit fonts in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

154 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

81 Comments

Leave a Reply
  1. Armando says:
    Jul 9, 2020 at 5:35 pm

    I noticed that this video/instructions are dated 2015 and the screenshots, etc. are different. When I tried to embed the Google Fonts code in my header.php file as shown, it threw an error. So I’m thinking maybe this tutorial needs to be updated? Not sure, but… Thanks.

    Reply
    • WPBeginner Support says:
      Jul 10, 2020 at 9:01 am

      Thank you for your feedback, we’ll be sure to take a look into updating this article when able.

      Reply
  2. Wout says:
    Nov 11, 2019 at 5:38 am

    Thanks for the article! Please replace http: in fonts.googleapis.com/css… with https: in the function to enqueue Google Fonts to enable an encrypted link to googleapis.com…

    Reply
    • WPBeginner Support says:
      Nov 11, 2019 at 10:08 am

      Thanks for pointing this out, we will be sure to update the links as soon as we are able :)

      Reply
  3. Sofia says:
    Aug 19, 2017 at 5:18 am

    I’m pretty sure it’s 2017 why we even have to learn all this :”((

    Reply
  4. charles says:
    Aug 10, 2017 at 3:55 am

    Is this still the right way to do it?

    Reply
  5. Renee says:
    Jul 19, 2016 at 3:41 pm

    I got the font to show up but can’t figure out how to get it bold.
    Here’s an example of what i did in the css

    font-family:”Open Sans”, sans-serif;
    font-weight:bold;

    in the link i added to my header.php i added this:

    i tried subbing 700 for bold but no luck…
    any ideas?

    thanks in advance

    Reply
    • Isaac Anderson says:
      Apr 13, 2017 at 11:16 pm

      Make sure you check your desired font-weights on Google fonts after selecting them in the “customize” tab.

      Reply
  6. Louis says:
    Jun 17, 2016 at 1:37 pm

    Works perfect! Thx.

    Reply
  7. josh says:
    Jun 13, 2016 at 2:28 am

    Huh? Wtf does any of this mean? How do I make it so that I can just add a google font in my post or page?

    Reply
  8. Shubham Kumar says:
    Mar 28, 2016 at 8:05 am

    What do you think about importing Google web Fonts using JavaScript asynchronously as mentioned over here :

    Thanks
    Shubham

    Reply
  9. Jordan says:
    Mar 22, 2016 at 8:20 pm

    One quick question – I looked up the code reference for wp_enqueue_style(). Its first argument is a string that denotes the name of the stylesheet. In your example, you use ‘wpb-google-fonts’ for the first argument. How can I tell what to put here for my site?

    Reply
  10. pete rome says:
    Dec 25, 2015 at 11:04 pm

    where do I paste stuff in the header exactly? always see that but people never explain exactly where it is.

    Reply
  11. Carla DeLauder says:
    Nov 1, 2015 at 10:49 pm

    What does ‘false’ do in this function? Other enqueued functions don’t include it.

    Thank you.

    Reply
    • Kev says:
      Dec 3, 2015 at 3:04 pm

      that’s the argument for header or footer. Since best practice is to put [almost] all scripts in the header it defaults to ‘true’ => footer, whereas ‘false’ would mean the NOT in the footer, but in the header instead.

      Unfortunately, font scripts stop everything else from loading, so putting them in the header sucks a litlte bit, which is why this article talks about making sure you’re only including the fonts you’ll actually use. On the flip side, putting them in the footer can cause default fonts like arial to load momentarily on your screen during painting until the webfont gets loaded. It’s a horrible caveat, but it is what it is.

      A practice I’m working into my workflow is to conditionally load fonts based on their usage in the site. For example, maybe “bold” is only used in h2’s and h3’s in blog post templates (single.php), then I’ll write a conditional enqueue for the bold script to only be enqueued when on single.php template.

      Hope that helps.

      Reply
      • Kev says:
        Dec 3, 2015 at 3:10 pm

        Also, to note.

        By “bold” above, I meant a specific bold version of a font family. <= just a head's up.

        Reply
  12. Kenneth John Odle says:
    Jul 26, 2015 at 8:35 pm

    As of WordPress 3.3, wp_print_styles is deprecated.

    Reply
    • Bram says:
      Aug 26, 2015 at 7:13 am

      Yeah, you should update this article.

      Reply
      • WPBeginner Support says:
        Sep 6, 2015 at 1:44 pm

        Updated.

        Reply
    • WPBeginner Support says:
      Sep 4, 2015 at 8:51 pm

      We have updated the article, it now shows how to add Google fonts using the proper wp_enqueue_style function and wp_enqueue_scripts action hook.

      Reply
      • isak says:
        Jan 6, 2016 at 9:25 pm

        How do you enque two font families via functions.php?

        Reply
  13. April says:
    Jul 4, 2015 at 3:00 am

    I’m using the Punch Fonts plugin to add google fonts but I am not sure how to just get only heading 1 for the desired font. I don’t need this font for headings 2-6 so I only want to use the google font for heading one. How do I write that in the parameter?

    Currently I’m using: Oleo+Script+Swash+Caps:400

    Reply
  14. Melissa says:
    May 11, 2015 at 10:25 pm

    Well, if anyone is stuck, there is also this plugin called Easy Google Fonts. Very helpful.

    Reply
  15. Melissa says:
    May 11, 2015 at 3:34 pm

    Hello,

    I have tried all three methods but neither of them took effect completely. It seems that it only applies to certain elements and not to others that I specified with that font in the style sheet

    When I use the Element Inspector for the element where my Google Font is not applied, this is what I see:
    #site-title {
    font-family: \’Questrial\’, Helvetica, Arial, sans-serif;

    What do these mean \\ around my font? I mean, it looks like it is indicating an error but I can’t figure out what I am doing wrong? What could it be? Some code overriding mine, with higher priority? but where? how? Arghhhh it’s driving me nuts

    Reply
  16. Ali Sajjad says:
    Mar 18, 2015 at 11:30 am

    Dear Editorial, i want to add all google web fonts in this site, and then want to use in my means,

    but i dont want to use too many links in header file. any other way?

    Reply
    • WPBeginner Support says:
      Mar 18, 2015 at 7:22 pm

      Only add the fonts that you want to use.

      Reply
  17. Anurag says:
    May 20, 2014 at 11:44 pm

    So, I have got a blog ( http://www.goingtechy.com/ ). The problem I am having is that I want to optimize css delivery of the Google font that my site uses already. So, the site already have Google fonts. How can I optimize it?

    Reply
  18. Samantha says:
    May 8, 2014 at 1:52 pm

    Thank you so much for this post! For someone who has no formal html/css training, I was impressed with the simplicity of this post.

    Reply
  19. Tanisha says:
    Mar 18, 2014 at 3:06 pm

    So easy and go it to work perfectly. Thanks for this. :)

    Reply
  20. Greg says:
    Mar 13, 2014 at 11:36 am

    Hi there,

    Using Genesis and the Parallax Pro theme…
    But a newb to things like php etc

    I added this code to the fuctions.php file as you insctructed:
    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts() {
    echo ”;
    }

    The headers that use the font above remain unchanged.

    Questions:
    1. Am I right in assuming that the code above is the only thing that I add?
    2. Where exactly should the code be added – at the beginning or end of fuctions.php?
    2. Is there anything missing from the code?
    3. Should I be adding something to the style.css file?

    Appreciate your help
    Regards
    Greg

    Reply
    • WPBeginner Support says:
      Mar 14, 2014 at 11:38 am

      Greg, seems alright to us. We think WordPress probably omitted the part from your code where you echoed font link. Yes you will need to use CSS to set style rules for selectors where you want to use your Google font.

      Reply
  21. Tony Porto says:
    Jan 10, 2014 at 7:18 pm

    None of the above is good enough, we all know “wp_enqueue_style( ‘google-font’)” is the “technically correct way to call a script, but in this case your <header will end up like this;

    FONT 1:
    FONT 2:
    FONT 3:
    FONT 4:

    No Good, it needs to be like this:

    Reply
  22. Akmal says:
    Dec 21, 2013 at 11:54 am

    Where should i paste the above code? I could not find the last line of code anywhere in my header.php file? Can you please tell me step-wise?
    Thanks.

    Reply
    • WPBeginner Support says:
      Dec 21, 2013 at 2:22 pm

      In your header.php file you will find </head> you can paste this code any where before this tag.

      Reply
  23. Sarah says:
    Nov 25, 2013 at 8:18 pm

    Tried re-typing the following, and still nothing is changing;

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

    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts () {
    echo ‘’;
    }

    /* Defaults

    It worked the first time. I’m so confused!
    Thanks for your help.

    Reply
  24. Sarah says:
    Nov 21, 2013 at 6:26 pm

    Hi,

    I was so proud of myself for copying the code and changing the font which, I found too large for my site. When I tried to change it to something else, I must have mixed something up, and only one font style continues to show, even when I play about with the codes. Feeling like a dunce now – I don’t talk tech. Can anyone help me? I’ve done it with and without the numbers in case they’re not actually part of it. Thanks. This is the latest that I entered…..

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

    1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
    2
    3 function wpb_add_google_fonts() {
    4 echo ”;
    5 }

    /* Defaults
    ———————————————————— */

    Reply
    • WPBeginner Support says:
      Nov 22, 2013 at 10:51 am

      we hope you did not enter the numbers with the code Or did you?

      Reply
      • Sarah says:
        Nov 22, 2013 at 11:50 pm

        No numbers, but I am missing something this time around. This is exactly what I have in my table;

        add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

        function wpb_add_google_fonts() {
        echo ”;
        }

        Reply
      • Sarah says:
        Nov 28, 2013 at 11:14 am

        It seems the code worked…..on one computer. It hasn’t taken on two others that I use.
        Can you please suggest why that might be the case?

        Thanks so much

        Reply
  25. Karissa Skirmont says:
    Nov 10, 2013 at 2:37 pm

    How can you use multiple Google Fonts in the functions.php ?

    I had this:

    //* Enqueue Google fonts
    add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
    function executive_google_fonts() {
    	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
    	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
    }
    
    

    But the Dancing Script wasn’t showing up font on my second computer or iPhone or tablet.
    I removed the Open Sans and it started working.

    Reply
    • WPBeginner Support says:
      Nov 10, 2013 at 4:30 pm

      @Karissa, the first argument in wp_enqueue_style function is the handle for the style script you are loading. Try this code instead:

      //* Enqueue Google fonts
      add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
      function executive_google_fonts() {
      	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 );
      	wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 );
      }
      
      Reply
      • Karissa Skirmont says:
        Nov 10, 2013 at 5:03 pm

        Nevermind, I figured out that I needed to use a link like this:

        ‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’

        Reply
      • Karissa Skirmont says:
        Nov 10, 2013 at 5:33 pm

        Ahh I see, I replied above before refreshing the page and seeing your reply.

        By using the link Google gives when you have multiple fonts selected, it produces it like that and you can more easily try out different fonts live on site.

        Reply
  26. Chaitanya says:
    Nov 6, 2013 at 11:41 pm

    Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support :)
    Long Live WPBeginner…

    Cheers,
    Chaitanya

    Reply
  27. Jenny says:
    Oct 6, 2013 at 2:55 pm

    Meh, I like using the import. Less work for me ’cause I’m lazy~

    Reply
    • pete rome says:
      Dec 25, 2015 at 11:06 pm

      yeah way too much work on each method here and there shouldn’t be a need to add anything to the style sheet find a plugin

      Reply
  28. Jimmy Reynolds says:
    Sep 5, 2013 at 11:05 am

    A you mean the nerd way :D

    Reply
  29. mzilverberg says:
    May 25, 2013 at 11:36 am

    Something I missed here were the conditional comments to make Google’s webfonts work in IE8 and below if you request more than one font weight. For example:

    <link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />

    That’s why I created a function for loading fonts: https://github.com/mzilverberg/LoadGoogleWebfonts

    My script also places the appropriate fallback urls within a conditional comment.
    With a few lines of code you could also make this work in functions.php in your WordPress theme.

    Reply
  30. Greg says:
    Apr 30, 2013 at 3:07 pm

    What about adding Google Fonts to the admin side?

    Reply
    • Editorial Staff says:
      May 9, 2013 at 11:06 am

      Why would you want to add Google Fonts to the admin side?

      Reply
      • Bruce Smith says:
        May 23, 2013 at 6:09 pm

        To maintain WYSIWYG in the admin content editor. So that I see the same font face in the admin editor as on my web site.

        Reply
        • Dan Merhar says:
          May 30, 2013 at 3:31 pm

          I was actually wondering how to do the same thing (and this is the first result that popped up on Google).

          I know plug-ins exist to add Google Webfonts functionality to the WYSIWYG editor, but they bog it down like crazy. I’m going to look into it further and see if there’s an easy way to add a font or two.

  31. Marleen says:
    Dec 30, 2012 at 7:16 am

    Thanx a lot for sharing, I’m really happy with this. I’m a Genesis user and started using @import because it’s alraedy being done in the stylesheet. Feel much better about this solution.
    Happy 2013!

    Reply
  32. jeff says:
    Dec 6, 2012 at 4:29 pm

    In your code do I replace “YOUR THEME STYLESHEET” with something??
    mine is STYLE.CSS, or does it need to be a URL ??
    thanks,
    Jeff

    Reply
    • Editorial Staff says:
      Dec 6, 2012 at 8:20 pm

      Yes, you need to insert your theme’s style.css path there.

      Reply
  33. Charles says:
    Oct 16, 2012 at 10:06 pm

    This is what I use…..

    Add this to your theme’s functions.php file:

    /*----------------------------------*/
    /* Load CSS Files
    /*----------------------------------*/	
    	if(!function_exists('load_theme_styles'))
    	{
    		function load_theme_styles()
    		{		
    			if (!is_admin()) {
    				
    				$cssURL = get_template_directory_uri().'/css/';
    				$fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald';
    				
    				// Registering New Styles	
    				wp_register_style('googleFont', $fontURL);					
    				wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen');
    				wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print');
    				
    				// Enqueing Styles
    				wp_enqueue_style('googleFont');	
    				wp_enqueue_style('style');
    				wp_enqueue_style('print');			
    				
    			}
    		}
    	}
    	add_action('wp_enqueue_style', 'load_theme_styles');
    

    What do you think about this?

    Reply
    • Chris Reynolds says:
      Jul 20, 2013 at 8:46 am

      This is the CORRECT way to add Google fonts. Always use wp_register_style/wp_enqueue_style

      Reply
  34. David says:
    Oct 10, 2012 at 7:44 pm

    Better still add a conditional comment to serve the fonts separately for IE 7 and 8:

    From here:
    http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/

    Reply
  35. Bryan Nickson says:
    Sep 12, 2012 at 12:16 pm

    Nice tuts. I had wanted something like this..Kudos!!

    Reply
  36. Peter says:
    Aug 11, 2012 at 3:25 am

    What about the JS option, is that a faster option Or the one is the better?. Thanks

    Reply
    • Editorial Staff says:
      Aug 11, 2012 at 7:11 am

      The method in this one is by far the most recommended one.

      Reply
      • QLStudio says:
        Oct 19, 2012 at 2:38 pm

        In your answer you don’t enqueue the css – is that really the best way to add it?

        Reply
  37. Chris says:
    Jul 23, 2012 at 4:18 pm

    Great article! I think it would be pretty cool if wordpress, by default, had Google Fonts included into it, but this seems easy enough. Thanks for explaining!

    Reply
    • Editorial Staff says:
      Jul 24, 2012 at 8:37 am

      Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though :)

      Reply
  38. Aaron Crow says:
    Jul 20, 2012 at 8:22 pm

    You rock man! Just what I was looking for! Thanks for putting up this post… I searched forever trying to find something about adding this to my theme. Glad I stumbled across your page.

    Reply
  39. Anderson Curry says:
    Jun 29, 2012 at 1:33 pm

    Great post and even if their is a plug-in to do this, it’s always better to learn the non – plugin way also.

    Reply
  40. Brad says:
    Jun 27, 2012 at 10:51 am

    So obviously you dont accept using the several Google font plugins. I am going to have to revisit my css files in that case.

    Reply
  41. sadhu says:
    Jun 27, 2012 at 10:40 am

    i dont understand the second part which is adding font to the genesis add action thing.. is that another method to add in google web font?

    and i know we dont have to incld all styles of the font, but the recommended method, which is http://fonts.googleapis.com/css?family=Lora|Oswald

    just for instance, what if i only want bold style for lora and light style for oswald, then how to combine the font styles?

    thanks

    Reply
    • Editorial Staff says:
      Jun 27, 2012 at 11:04 am

      The second part is for Genesis Users ONLY. If you are not using the Genesis Theme Framework, then you don’t need that part. To combine styles like you want, here is how you do it:

      http://fonts.googleapis.com/css?family=Oswald:300|Lora:700

      Reply
      • Anton says:
        Mar 7, 2013 at 5:29 pm

        What should I do if I want to use @font-face in Genesis Framework like you showed here with the Google Webfonts, are there any solution for that.
        I’ve been searching all day since my fonts loads incredibly slow!
        Cheers

        Reply
  42. Gautam Doddamani says:
    Jun 27, 2012 at 10:24 am

    great tutorial…i actually use the wp google fonts plugin…would you recommend that plugin or doing the manual way as described above..which is efficient performance wise?

    Reply
    • Editorial Staff says:
      Jun 27, 2012 at 11:00 am

      Haven’t tried that plugin. But we almost try to avoid plugins of that sort because it can be done easier with theme files.

      Reply
      • Gautam Doddamani says:
        Jun 28, 2012 at 12:51 am

        sweet…thanks will edit my theme instead of using a plugin :)

        Reply
        • Pippin says:
          Oct 20, 2012 at 6:16 pm

          Avoiding the google fonts plugin because it is a plugin is not a good reason at all. Using the plugin actually provides you with much more flexibility than including it in your theme, especially if you ever choose to change themes.

        • Editorial Staff says:
          Oct 21, 2012 at 8:40 am

          As far as I’m concerned, fonts in most cases are considered stylistic elements thus theme based, and they usually change when you switch to a different theme.

  43. Siddanth Adiga says:
    Jun 27, 2012 at 8:38 am

    Superb post I was looking for this only i was trying my hands with css and fontface .I ll try this one too thanks

    Reply
  44. Konstantin Kovshenin says:
    Jun 27, 2012 at 5:49 am

    The “Right” way would be to use the wp_enqueue_style function :) Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/

    Reply
    • Editorial Staff says:
      Jun 27, 2012 at 6:36 am

      Konstantin, I totally agree with you. wp_enqueue_style function should always be used. That is what I tried doing first as suggested by Nathan Rice, in StudioPress’s article about Google Fonts. Except Google clearly states, that the font styles should be loaded before anything else. Using wp_enqueue_style and then printing them using wp_print_styles, this was printing the item after the main stylesheet was already loaded. That was the reason why I had to hook into genesis_meta() hook. Anyways, totally agree with your thoughts on your article.

      Reply
      • Japh says:
        Sep 24, 2012 at 5:05 am

        I’m a little late to this, but I wanted to mention that you could still use wp_enqueue_style, just set the priority higher so that they are loaded first :)

        Reply
    • Bob R says:
      Jun 27, 2012 at 9:01 am

      Great tutorial. One observation though: first image in the article was meant to show the @import tab, wasn’t it?

      Reply
      • Editorial Staff says:
        Jun 27, 2012 at 10:58 am

        No it wasn’t suppose to show that.

        Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
WP Coupons and Deals
WP Coupons and Deals Coupon
Get 30% OFF on WP Coupons and Deals WordPress coupon plugin.
Revive Old Post
Revive Old Post Coupon
Get 15% OFF on Revive Old Post WordPress social share plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.