Top WordPress Custom Fonts Plugins Reviewed
Top WordPress Custom Fonts Plugins Reviewed
These days we’re spoilt for choice when it comes to web typography, the only issue being how to actually add custom fonts to your WordPress site.
Digging around in code and messing with files can be fiddly. Luckily, there are plenty of great options if you want to change your site’s fonts, from simply adding a new font to see on elements like your header, to adding colors changing font sizes.
In this post, I’ve reviewed six of the best plugins that can help you get custom fonts set up easily on your WordPress site.
In this post, I’ve rounded up and tested the six best custom font plugins, scored them, and given each a brief description so you can make up your own mind. Each of the plugins has been scored on usabilty, user interface and the ability to upload custom fonts.
Use Any Font
Use Any Font is marketed with the tagline “Embed any font in your website.” A simple enough promise that describes exactly what this plugin delivers.
After installing the activating this plugin, you’ll need to sign up to the developer’s website in order to get an API key.
The developer, Dinesh Karki, asks for donations in increments up to $100 for using his plugin. Any donation over $10 will get you unlimited activation and unlimited font conversion for a lifetime. If you’re tight with cash and want the plugin for free (which I suppose isn’t asking too much since it’s available to download in the WordPress Plugin Repository), then you’ll only get a single activation and a single font conversion. So you pretty much get your arm twisted into making a contribution since who wants a plugin for just a single font?
Once you’re API key is sorted, you can get on with uploading your own fonts. The plugin has one settings screen, which can be found in Settings > Use Any Font. From here, you can upload fonts, assign fonts to elements like headlines, paragraphs and blockquotes, and add custom CSS.
Dinesh seems to use his own service for converting your fonts to web fonts, but they do come out clear and the anti aliasing is pretty good.
While the user interface is fairly easy to get around, it’s not all that attractive, and it doesn’t make any sense that the instructions are at the bottom of the settings page and not at the top.
There are detailed usage instructions (not that you’ll probably need them) as well as support available on the developer’s website.
This is a fantastic plugin if you’re looking to quickly and easily add custom fonts to your website.
- Ability to upload multiple custom fonts
- Ability to assign fonts to elements such as headers, paragraphs and blockquotes
- Wonky user interface with instructions at the bottom of the settings screen rather than the top
WP Google Fonts
WP Google Fonts makes adding custom fonts to your site really easy. After installing and activating the plugin, go to the settings page (located at Settings > Google Fonts) where you can add new fonts and assign each of them to elements such as headlines, blockquotes, paragraphs and lists. You can also add custom CSS.
Cleverly, the plugin limits users to just six custom fonts, not only so you don’t use up too many resources, but also so your website doesn’t look ridiculous with different fonts for every element.
Unfortunately, you can’t preview what fonts will look like on the front-end before saving them. Instead, you’ll have to search through the Google Font Directory to find the fonts that you want before switching back to the plugin to input and save your settings.
Overall, this plugin gets top points for simplicity and ease of use.
- Easy to use
- Access to a huge number of Google fonts
- Unable to preview fonts
- Unable to upload custom fonts
Easy Google Fonts
After installing and activating this plugin, the natural thing to do is head over to the settings page, which you’ll find at Settings > Google Fonts. The settings page is confusing at best. Where are all the fonts? What are you supposed to do?
There’s a noticeable lack of instructions, so I went back to the plugin download page to try and work out what I needed to do.
It turns out, you use the plugin from the Customizer. Nifty, right? This allows you to preview fonts on your website before you save them.
The plugin gives you incredible control over how you integrate fonts with your website. For each element on your site, you can choose a different font, specify its weight, decoration and any text transformation. You can also add colors, a background color, font size, line heigh and letter spacing. And not only that, you can also edit the positioning of your font, including margins and padding.
Now back to the settings page. You can create font controls, which allow you to add specific CSS selectors that you want to control or even override. For example, you may want to bunch all your headline elements (h1, h2, h3 etc) into one font control called “Headings,” or put your body text elements (body, p, blockquote) into a font control called “Body Text.”
This plugin is perfect for anyone looking for an easy and powerful way to use Google fonts in their theme without having to mess around with code.
- The ability to preview custom fonts in the Customizer before saving them
- Powerful customization
- Confusing settings page. It’s not clear that you need to use the Customizer
Typekit Fonts for WordPress
After reviewing many solid plugins for this round-up, Typekit Fonts, for me, was a bit disappointing.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
I was expecting the ability to upload fonts and even some integration with my Typekit account, but instead I got a text area for pasting embed code and another text area for custom CSS rules. And that’s it.
In order to use this plugin you need to have a Typekit account, or sign up for one. The idea is that you choose a few fonts in your account and publish them, then go to the Kit Editor and get your embed code, which you then paste on the plugin’s settings page.
If you aren’t willing to spend some cash on a Typekit plans, your options are limited to just a handful of fonts.
Overall, there are better plugins out there than this one if you want to add custom fonts to your website.
- Ability to add custom CSS rules
- You need to sign up for an Adobe/Typekit account if you don’t already have one.
- Inability to add and manage custom fonts from within the plugin
FontMeister bills itself as a “one-stop plugin for all your fonts.” And indeed it appears to be just that. This plugin pulls fonts from your Google, Typekit, Fontdeck and Font Squirrel accounts for you to use in any theme.
I was looking forward to testing this plugin to see what it was capable of, but when I tried to add new fonts from Font Squirrel I was unable to preview them or make changes.
So I went back to the plugin page in the WordPress Plugin Repository and realized the plugin hasn’t been updated since WordPress 3.5 at the end of 2012. It seems the plugin developer has abandoned this plugin as many questions seeking support have also gone unanswered. It’s a shame because this plugin has a lot of potential.
Even if this plugin was working and up-to-date, average users you would be better off looking at other easier to use font plugins that don’t require signing up for a third-party account.
Hopefully someone adopts this plugin because it has a lot of potential to be useful for developers.
- Hard to say because the plugin wouldn’t work
- It seems the plugin doesn’t appear to work with WordPress 4.0 and the developer is no longer maintaining it
I must admit, I was hesitant to test this plugin. Anything that uses an excessive number of exclamation marks and 1990s era graphics with lots of drop shadow instantly puts me off. But the huge number of downloads (almost 340,000) and high rating (4.4 out of 5 starts) convinced me this plugin must be actually good.
Do you remember what Myspace pages used to look like when teenagers would go crazy with their CSS, making headers bright green and body text bright red, not to mention the distracting, moving background images? Well, this plugin is kind of a throwback to that time.
After installing and activating Font, you need to go to the front-end of your site and click “Font settings” in the top admin bar. A floating menu box will then appear and a bunch of font settings will replace the admin bar, including fonts, font size, and color. There are also pro settings that offer shadows and text angles if you want to upgrade. Upgrading is a fairly clumsy experience, which you do from within the front-end editing view and pay via PayPal.
- The front-end font editing experience is… interesting
- The front-end editing experience isn’t smooth and it takes a few goes to get things looking right. It also appears to be a bit buggy.
And the Winner Is…
There is no real clear winner. While I’ve scored the above plugins based on usability, user interface, and the ability to upload custom fonts, the last criteria skewed the results. While plugins like WP Google Fonts and Easy Google Fonts don’t allow you to upload your own fonts, they are still great options if you’re content with the, you know, 600+ or so Google fonts available.
If you have just one font you want to add to your site to change, say, your headers, Use Any Font is a brilliant and easy to use option for the average user.
While of these custom font plugins has its pros and cons (as described above in each review), each seemed to be let down by their user interface. While it wasn’t too hard to figure out how to use these plugins without turning to documentation, these plugins obviously haven’t been designed with user experience in mind, which is a downfall for many plugins.
Hopefully this list will provide you with some food for thought when choosing a solution for adding custom fonts to your WordPress site.