Fontific – Google Fonts

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.

 

Comments

  1. you should remove this plugin from the WordPress plugin library. It does not work AT ALL and has not been administered by the plugin owner for 604 days. I have to spend hours now re-doing what your plugin says it does but does not. The sliders do not work and you cannot change the font size at all. What a shame. It could be great!

  2. Girl Friday,

    First, you make a rather sweeping accusation against this plugin. It is working perfectly here at the lab. So because it isn’t working for you doesn’t mean it is a bad plugin. Quite often we find that a plugin conflict is really the issue. Or a theme that is propitiatory in nature not allowing the plugin to integrate.

    The days since a plugin was updated doesn’t necessarily mean it is a bad plugin. There are many that perform a simple function that isn’t going to be affected by WP updates.

    I use it here only on this particular post. I prefer to go to google fonts and bring in the font’s I want to use directly, but for those that want a less technical approach Fontific still works.

    There might be better options for integrating Google Fonts into a site since this was written. This is the last point. Reviews of plugins really are a snapshot in time. But on this site with over 65 plugins and running WP 3.5.1 it is working perfectly.

    Dave

  3. Hello, Dave!
    A few month ago I have created my own website with wordpress and dowloaded fontific. At first it worked perfectly. Than I didn’t use it for a long period of time. Now I have the same problems as GIRL FRIDAY. I cant even predict what could cause the problem. So I need your advice. What should I do to solve the problem?
    Thanks in advance.

  4. Anna,

    There are too many variables in what you have written. Did you turn it off and now you have turned it back on and it doesn’t work.

    1. Did you change themes?
    2. Did you update your WordPress install or the plugin itself?
    3. Did you check the settings of fontific to see if that font is still available?

    Those are important questions you need to go over in order to figure out why it isn’t working now.

    Dave