WP Google Fonts Plugin

WordPress Google Fonts PluginI had the pleasure of getting involved with the development of the excellent WP Google Fonts plugin by Adrian Hanft starting with version 3.0.

Adrian reached out to see if I’d be interested in helping take WP Google Fonts to the next level by integrating it with the Google Webfonts API. Prior to v3.0, the plugin used a list of fonts meticulously and manually updated by Adrian. Since the plugin’s conception, the Google Fonts foundry came alive with new fonts being added at an ever increasing pace. This put a big burden on the plugin developer to update the plugin more and more frequently.

Making A Good Plugin Better

We needed to come up with a solution that would update more easily at the least, automatically if possible. Luckily, Google provides an excellent JSON API for their webfonts.

I work with lots of clients and designers who look to Google Webfonts to accomplish their website design goals. I’ve used the WP Google Fonts plugin myself since it first came out. So, when Adrian contacted me to improve the plugin, I was excited to help.

Maybe too excited. In the end, the code was about 80% new. At the same time, though, I’m happy to say that overall the code was also several hundred lines shorter.

API Integration

The plugin was completely reworked to dynamically sync with the ever-growing Google font library. This allows the plugin to always be current and eliminates the need for users to install an update every time Google adds new fonts.

Dynamic Menus in Admin

After integrating the Google Fonts API and solving challenges surrounding getting the fonts and calling the CSS correctly, we saw that we could also improve the UI in the admin menus. We created a set of new, dynamic dropdown menus that partially fill themselves in using jQuery and similar logic to the Google Webfonts usage site itself.

This new menu allows users to select the exact variations of fonts that they need–no more, no less. Before, users were sometimes stuck with having to download all variants of a single font, which caused slower site loading by up to four times.

Faster Websites

In addition to downloading fewer fonts in some cases, saving a good amount of download time, websites using the plugin now make fewer external calls than before. This means fewer round trips to Google’s servers and, you guessed it, faster load times. In previous versions each font was called separately. In v3.0, all fonts are called in a single external CSS link for a single round trip to the server.

WP Enqueue Style

Prior to v3.0, WP Google Fonts received some criticism on how it called for fonts. Instead of using wp_enqueue_sytle() to add them to a site’s header or footer, it simply output them as text in the site’s header. This criticism was just. It is important for many developers and site owners to be able to affect the order and output of styles and scripts. So, v3.0 moved all calls to styles and scripts into the correct enqueue method.

Updating Fonts and Settings

One critical piece in undertaking a plugin update of this size is making sure that all settings and information are kept–that there is no loss and that the user only sees benefits and no frustrations. This is what keeps us developers up nights. Especially for a plugin that has over 300,000 downloads and thousands of active users.

The data structure did change considerably in this update to accommodate easily adding fonts and future options. That meant I had to code a conversion from the old font selections stored in the database to the new font selection structure. The old structure was manual and therefore filled with inconsistencies and ‘special cases.’ In the end, we were excited to establish a solid, well-tested method to do the conversion so that users wouldn’t have to touch anything and would still get all the benefits of the update with no loss of service.

Support

If you have any questions about the plugin or need some specific help, please don’t hesitate to reach out to either Adrian3 at http://adrian3.com/contact or myself (Aaron) at wpgooglefonts@webmalama.com.