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.
✕
Join the newsletter
Subscribe to get regular WordPress content delivered right to your inbox.
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.
Aug 3, 2012Apparently @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>.
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.
Aug 3, 2012Apparently @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.
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.
Aug 3, 2012Apparently @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.
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@Android63 Good point. I didn’t mention it in my comment, but I use child themes whenever possible.
Aug 6, 2012@Android63 Yep, I highly endorse child themes, but for simplicity’s sake, I chose to leave that out of this tutorial.
Aug 6, 2012I 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