Google Typography: A Plugin for WordPress

Eric Alli
Eric Alli
Mar 22, 2015 · 3 min read

In the recent past, I’ve made attempts to build an integrated font manager into a few of my WordPress themes. I eventually came up with a bit of clever functionality to define customizable font areas within a theme (page titles, body text, etc…) and allow the user to customize the font family, size, and other attributes. It looked something like this:

Although it worked well, it required a large amount of (hacked together) code and having to manually include this of in each of my themes became a tedious and surely unsustainable solution. Recently, I managed to extricate this functionality and fashion a WordPress plugin out of the main features — I call this plugin Google Typography.

Google typography is a plugin for WordPress that allows anyone (and mostly non-techies) to use any of the 600+ fonts from the Google Fonts database and apply them to any font on their WordPress site with writing a lick of code.

My main intention for this plugin was to make it completely self-reliant and hooked straight into WordPress callbacks, so that you may utilize the plugin on even the most simple (or complex) of themes without the worry of conflicting styles.

How It Works

When the plugin settings page is loaded, it checks Google for a fresh list of the latest fonts and drops them into a slick ajax-powered interface where all customizations begin.

Once you’ve added your custom font sets, the plugin generates the CSS for importing the necessary Google Font stylesheets and appending the custom CSS properties for your defined font sets to the header of your site (loaded after your main stylesheet). Check out the video below for more info:

For Theme Developers

I’ve added a handy function called register_typography for loading up default, pre-configured font sets when the plugin is activated. Why you ask? Well…

For a theme developer like myself, you can simply build your themes with awesome Google Fonts and for each specific area you’d like to make customizable, you can define that area to be created automatically when a user installs the Google Typography plugin. Pretty nifty, right? Drop this in your functions.php file and try it out:

if(function_exists('register_typography')) {    
    'page_titles' => array(
      'preview_text' => 'Page Titles',
      'preview_color' => 'light',
      'font_family' => 'Lato',
      'font_variant' => '300',
      'font_size' => '45px',
      'font_color' => '#252525',
      'css_selectors' => '.page_title'

Fork it on GitHub or download it from the WordPress plugins directory and let me know what you think!

Eric Alli

Written by

Eric Alli

Musings of a San Francisco based Designer, Engineer, Musician, and Motion Graphics Designer.