Choosing the Best Custom Fonts Plugin for WordPress

Today I’m going to review four WordPress plugins that can help you get custom fonts set up easily on your blog.

Custom fonts have swept the web, starting with Flash & Javascript based solutions such as sIFR and Cufon. Next came @font-face and high quality hosting services such as Google Web Fonts, Typekit and Fonts.com.

Whichever you choose, you’re eventually going to have to install it on your website, and if you don’t want to take the path of installing it yourself, there are a plethora of plugins that can help you.

The thing that irks me most about using plugins though, is their poor usability, lame interfaces and clunkiness.

Here, I’ve rounded up and tested the four best, and given them a score and brief description so you can make up your own mind.

Anyfont

The reason I wanted to review Anyfont was because it provided the feature of uploading a font from your computer, and using it on your blog.

I was hoping for something easy, something for the masses. And to an extent, it worked.

As you can see here, the default setting is to generate images based on the .otf or .ttf you upload. Which is easy, but… very ugly. The anti-aliasing is shocking. Well, the complete lack of antialiasing for this feature is probably the cause!

After signing up for a fontserv.com account (the service that Anyfont uses to convert your fonts to web fonts, much like Font Squirrel), I found my way around the (cluttered) UI to enter my API key.

This allows you to convert fonts, and use the CSS attribute @font-face to create beautiful web fonts.

After that, I found it quite hard to find the button to actually convert the fonts! It seemed almost hidden away. Once I found it, I clicked “Convert to CSS font” and was then notified Fontserv was processing my fonts.

After this you need to head over to the create styles page, and finally go back to the first settings page to activate it on the main settings page.

In my opinion, the UI is incredibly tedious to use.

If you’re one of those people that slugs around a plugin until it works though, it’s a handy tool. If you manage to get as far as setting it up properly, the results are as you’d expect–nicely embedded @font-face fonts. All without touching any code.

Unfortunately for me, though, the UI killed it.

I’d probably find a better font using one of the coming plugins that use this plugin in my own projects. The dependence on a fontserv account is a little bit of a killjoy too. That said, it may work well for some people that have pre-existing fontserv accounts (though I can’t imagine anyone that would!).

Overall, I give it a 5/10.

5 points for being able to upload your own fonts, 0 for UI, and 0 for usability and ease of use.

WP Google Font

Sneakily hidden in the Settings Menu in wp-admin, this plugin was a pleasant surprise to use. It has a clean UI without fluff. It cleverly limits your custom fonts to 6 (as to not require too many resources). And it has the ability to add custom CSS to each selector.

Simple, no-frills settings page for easy use.

It’s no frills and it works. With the enormous Google Web Fonts library at your finger tips, it would be hard to not go with this plugin.

Out of all the plugins here, it’s my favourite. The only thing that is lacking is the ability to preview fonts. This caveat means you have to first find the font you want on the Google Web Fonts page and also find it in the list. A small sacrifice for such an easy to use plugin.

Seamless Google Web Fonts.

Another caveat I found was the inability to add custom selectors, for example, if you’re after a specific button to add the font to.

Overall, I give it 9/10 for it’s simplicity and effectiveness. Maybe that’s only because it’s powered by Google’s service, a mammoth font library.

Typekit

For me, the WordPress Typekit plugin was a bit of a let-down.

I was expecting some in-admin ability to add fonts to projects, publish them, etc. Instead, all I was faced with was a slot to put in my script, and then a slot to put in my custom CSS to use the fonts. Which by the way, it doesn’t provide in the back end. You’ve got to know your font names and CSS within projects on hand. IMO, you may as well skip the plugin and just put Typekit fonts in your theme.

Another negative for this plugin is that you have to have a pre-existing typekit account (adobe ID). If you can write CSS and know what the script does, you can modify your theme. A generally useless plugin to me.

I give this a 2/10 for making it slightly easier to hook into wp_head() and wp_footer().

Font Meister

I was really excited to review this plugin. It promises a lot, being able to essentially syndicate all your font resources (Font-Squirrel, Google Web Fonts, Font Deck and Typekit) into one place for use across your theme.

To an extent, the font-squirrel service works really nicely by itself. You can browse fonts, preview them, then download them to your install.

From there, you actually get to use custom selectors to tell the plugin which elements to target. As a developer, I like this. It’s the sort of no-frills approach that gets stuff done quickly.

The weird thing is you don’t have access to the Google Web Font library easily. You have to enter a Google API key (which I didn’t even bother with) to access what I assume will be a project based system like Typekit.

Typekit requires a premium account to use this plugin for an API key. Same goes for Fontdeck. If the way it works is identical to the font-squirrel upload, this could prove to be an excellent plugin.

That is if you have multiple font source subscriptions! I imagine you’d only go with one, and I doubt people would subscribe to both FontDeck and Typekit. Who knows though!

And the winner is…

By far, the plugin that stood out the most to me was the Google Web Fonts plugin.It’s simple, easy to use, and you can add custom CSS. It just works. Font-Meister also has serious potential for heavy web font users.

Unfortunately, the other two were sub par in various areas. If you can find a font you love on Google Web Fonts, I’d 100% recommend installing the WP Google Fonts plugin.

Tags

Comments (8)

  1. I tried several plugins and I agree with your review.

    It lacks the option of managing font weights (faux bold, for instance), but WP Google is by far the best one out there.

  2. I’ve been using the WP Google Fonts on my WordPress Building Blocks site http://wpbuildingblocks.com for several months, very happy with it. My only complaint is that the font I use for my headlines sometimes get cut off at the top or left-hand side because there’s not enough margin. Wish there were an easy way to adjust that — or am I missing something in the plugin?

    • I see what you mean. I think that’s a kerning issue- that “S” looks especially wide, so it’s getting cut off by the border of the h3 element.

      I tried adding padding, text-indent and overflow: visible, but can’t seem to work it out!

Participate