.jpeg "REBL-header (Custom).jpeg")
Google fonts are @font-face fonts. they can be loaded on the fly to your site. These fonts don’t have to be on the system of the reader. They are loaded to their browser on the fly from Google.
The typical way to do this is include a call to these fonts in your style.css file then apply them to the div classes and ids where you want them to be used. You need to be a bit geeky to apply these.
Enter Fontific
Fontific is a plugin that makes it easier to use Google fonts on your site.
Once you install the plugin. go to Appearance / Fonts Once there the first thing I’d recommend doing is click the link to Google fonts at the top of the settings page (Hold down the control key to open this in a new tab) Take a look around at the fonts and see if there are any you would like to use for headlines, special div classes or even as your main text.
Now that you have an idea of what fonts you like and where you want to use them (you did jot down the names, right?) Head back to the the settings tab.
But wait, there is one more thing you need to do first.
Appearance / Editor Now select your style sheet. If you are going to add new classes for these fonts this is the time to add them. I did that for this post. I’ve added four div classes:
f1, f2, f3, f4 They are created empty with no parameters. But I needed them to tell the plugin where to apply the font. Ex. .f1 { } that’s an empty div class.
If you want to use this for an existing part of your blog, I’d suggest you use firebug to view that area and find out what div id or class name is used where you want your font to be used.
Now you are ready to head back to Fontific.
Click on “New Font Rule“ Enter the class or id where you want this font to be applied. Ex. .f1 or #access Where you see “Enter Selector Here” click on the words. (Yeah, well, it took me forever to find out that wasn’t just a label)
Select your font from the drop down list. Set the size, spacing, line-height, etc. Save changes.
Now it should be used in your theme or div class for a post. I’m going to put it in this post. So that’s why the fonts are “funny”.
I’ve applied them on the HTML tab, and I put one of the classes in the h3 tag like this:
<h3 class=”f1″>Header here</h3>
That’s about it. Not too hard at all once you get the hang of it.
Word of Warning
These fonts are applied through this plugin and not in your style sheet. Don’t forget this. Debugging a font issue is different with Fontific. It overrides the font settings in your style sheet for the div ids and classes where you applied the Google Fonts. If you do forget you could really be pulling your hair out wondering why you can’t change the font.
Second, (but this applies to any theme change) You will need to reset or create anew where these fonts are applied if you change themes and want to still use the Google Fonts.
