A way to Easily Use Google Fonts in WordPress
Posted on June 4, 2014 at 4:13 pm
The CSS3 @font-face rule and services like Google Fonts have really spread out the doors for individuals to be more creative with web typography. Google Fonts has over 630 fonts available to make a choice from, and listed here, I’m going to expose you an especially easy solution to use them on your WordPress site – not they all instantly, obviously. Because that will just be crazy.
On the Google Fonts site, they do a superb job of providing instructions which are simple and hassle-free. However, following their instructions requires that you just modify the header.php or functions.php files of your WordPress theme to import the fonts. And you’ll also have to add the mandatory CSS to the way.css file. While this isn’t a very difficult task, there’s a better way.
First, you’ll must download and install the Google Fonts plugin from ThemeTrust. The cool thing about this plugin, is that it integrates directly with the WordPress Customizer, allowing you to immediately see how your typography will look as you put your fonts.
Once you’ve gotten the plugin installed, visit Appearance->Customize, and click the Google Fonts for ThemeTrust tab.
Within the panel, you’ll see eight different sections:
All Text, Paragraph Text, Header 1, Header 2, Header 3, Links, Blockquote, List Item
In each section, you may select a font and set the load for that font. There’s also a field to go into custom CSS selector. So as an instance, in case you desired to only set a custom font for the h3 tags within the footer, you could possibly enter something like this within the Custom Selectors field inside the h3 section: #footer
You also can add multiple selectors by separating them with commas, like this: #footer, #sidebar
Conclusion
As you will discover, it is a much simpler solution for using Google Fonts on your WordPress themes, especially in case you don’t get their hands dirty by editing theme files. And having the choices integrated directly into the WordPress Customizer permits you to quickly see what fonts will and won’t work together with your site.
Posted in Web Design