Video Tutorial

Use Custom Fonts with WordPress

One of the “features” of WordPress that I don’t like is how hard it is to add different fonts to your theme. For the most part, making changes in WordPress is a easy as updating a Google Doc online; except for changing fonts.

Yes, you can argue that you can use the drop down menu and change from different headings, but what if you want a completely different font altogether?

In this video, I share the easy way to add custom fonts for your WordPress site without having to know any code; you just have to be able to copy and paste a few lines of generated code.

    • warnerchad Reply

      I avoid editing template files whenever possible, so rather than putting the Google Web Fonts code in my header.php, I put it in my CSS file. In Google Web Fonts, on the Use page, the blue box has 3 tabs. One is “@import”. I put that @import statement in my CSS file, then I add the styling the same way you showed.
       
      Apparently @import isn’t as good for performance as using an HTML link, but I think the simplicity outweighs any minor performance hit. For more info, see these posts from <a href=”http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/”>WPBeginner</a> and <a href=”http://developer.yahoo.com/performance/rules.html#csslink”Yahoo!</a>.

      Aug 3, 2012
    • warnerchad Reply

      I avoid editing template files whenever possible, so rather than putting the Google Web Fonts code in my header.php, I put it in my CSS file. In Google Web Fonts, on the Use page, the blue box has 3 tabs. One is “@import”. I put that @import rule at the top of my CSS file (style.css), just below the comment block with the theme info. You can insert multiple @import rules. Then I add the styling the same way you showed.
       
      Apparently @import isn’t as good for performance as using an HTML link, but I think the simplicity outweighs any minor performance hit. For more info, see these posts: http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/ and http://developer.yahoo.com/performance/rules.html#csslink.

      Aug 3, 2012
    • Android63 Reply

      This is something I’ve been dealing with recently and you cut through a lot of confusion. Thanks Dustin! One suggestion: rather than changing the original versions of WordPress files like header.php and style.css, it may be better to work on copies in a child theme. That way, your changes won’t get wiped out when you perform an update.

      Aug 6, 2012
      • warnerchad Reply

         @Android63 Good point. I didn’t mention it in my comment, but I use child themes whenever possible.

        Aug 6, 2012
      • dhartzler10 Reply

         @Android63 Yep, I highly endorse child themes, but for simplicity’s sake, I chose to leave that out of this tutorial.

        Aug 6, 2012
    • Govt Tenders Reply

      I really like your way of expressing the opinions and sharing the information. It is good to move as chance bring new things in life, paves the way for advancement, etc.

      Nov 17, 2012

Leave a Reply