Free Webinar

Replay Now Available!
How to Build a WordPress Plugin
Watch Today!

Webinar Replays

Miss the live version?
Watch the Video Replay Now!
View Today!

Hi! I'm Dustin

My Goal is to Inspire You to
Do Amazing Things with WordPress
Learn More about Me

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.

Published on: 02 Aug | Video | 7 responses| Tags:

Subscribe and Never Miss an Episode

               
4 comments
Android63
Android63

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.

Chad Warner
Chad Warner

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.

dhartzler10
dhartzler10 moderator

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

Latest blog post: Learn to FTP

Chad Warner
Chad Warner

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>