Google Font Manager

A WordPress Plugin

When this plugin was released, Google fonts had over 650 fonts available for both public and commercial use.

New ones are being added all the time. You may utilize these fonts in your websites and other applications. Using unique fonts can extend your website designs, enabling you to achieve a distinct look and feel to your site. After all “a picture is worth 1000 words” and typography allows you to paint pictures with words.

This is great! But how do you add them to your site? Where do you start? These are simple questions that demand a simple answer. For developers, this seems easy and quite mundane. However, to many WordPress users finding and installing fonts can be a daunting task and many give up before they even get started.

The Google Font Manager plugin for WordPress solves this problem.

This plugin makes it super easy for you to find, preview and add Google fonts to your website. Finding the perfect font for your site couldn’t be easier! Simply click on the “Preview Fonts” tab and a list of all available Google fonts will appear. To preview what each font looks like, simply click on the font name. The preview window will slide out and display the font, showing you how it will look in several different variations. All of this without leaving the WordPress admin!

Google Font Manager - Preview fonts in the admin back-end.

If you like the font, you can click the “Add This Font” button within the preview window or use the “Google Font Selector” by typing the name of the fonts you wish to add. It’s that simple!

Type in the font selector to choose fonts.

To use the font selector, simply start typing and choose the font from the drop-down.

To find a list of font names that you want to use, you can click on the preview fonts tab, which will display a list of all Google fonts alphabetically. Then, just start typing into the space provided and the “auto-complete” drop down box will display a list of matching font titles. To add a font, just select the one you want from the drop down.

Once you add a font to your list, the font’s style sheet is automatically added to your website from Google. The font is now ready to be used in your website. There are three ways for you to make use of the fonts selected, and we’ll get to those options in the next section.

Removing fonts from the list is just as easy. You can delete a font from your list in one of three ways. The first way is by clicking on the “x” in the font list or under the Font Selector. Or, if you’d like you can “nuke” your current font selection and start over by clicking on the “nuke button” on the top toolbar.

Three ways to make use of your selected fonts.

If you are a programmer or a designer, the first way to use the fonts you’ve added is by modifying or creating a custom style sheet with your own CSS (as within a child theme). More on this in a minute. For regular WordPress users, the plugin adds two ways for you to apply selected fonts to your content.

The second and easiest way is to use the “Visual Editor” when writing your pages or posts. You will notice that the plugin has added a new drop-down option to the editor called “Font Family”. To use this option, simply highlight the text you want and select the font you want from the option box.

Google Font Manager - Visual Editor

The third way is a bit more involved but gives you more control over how the font is displayed. By using the “Default Style Editor” you can apply fonts and font properties globally to common website elements like paragraphs, header tags (<h1>, <h2>, <h3>), etc. This option is turned off by default and must be enabled under the plugin settings. Once enabled, click on the “Default Styles” tab to make use of it.

Google Font Manager - Default Styles

IMPORTANT NOTE: Using this option will override many of the font properties assigned to your theme by its style sheet. The Default Style Editor creates a new style sheet that is embedded in your website header after all of the other style sheets are loaded. Also, this feature is experimental and has not been fully “road tested”. It may be a bit “buggy” in certain browsers.

For more advanced users, the Google Font Manager plugin provides a light-weight solution for adding fonts.

If you are a designer or programmer, you can use this plugin without worrying about overhead. Designed to be “lean and mean” from the ground up, Google Font Manager only loads the resources you need, when you need them. Turning off the extended features connected to the visual editor and default style editor is easy. Simply toggle them “off” in the plugin’s settings panel.

This will remove the font selector from the visual editor and disable the default styles, leaving you with only the fonts you added in your website header. (This is not to imply that these extended features really add much in way of overhead, they do not.) Now, just add custom CSS to your theme’s style sheet, apply them in-line or wherever you’d like:

 body { font-family: 'Open Sans'; } or  p { font-family: 'Open Sans'; }

Using the “Font Options Inspector” to discover and utilize extended Google font properties.

To help you further identify the available properties, variations and subsets that come with the fonts you have chosen, you can use the “Font Options Inspector”. This feature lists the variations and subsets of each font. To do this, simply select one of your fonts from the drop-down-box and a list of variations and subsets will be retrieved via the Google font API. Then, you can use them in your CSS code:

 body { font-family: 'Open Sans'; font-style: italic; font-weight: 300; }

And that’s it! You now know everything you need to start adding awesome fonts to your WordPress websites. To download the plugin from the WordPress plugin repository, you can do so by clicking here: http://wordpress.org/plugins/google-font-manager/

There is more information about this plugin. We thought you’d like to know:

The Google Font Manager plugin was written as a training aid to demonstrate to our team members how we would like to approach plugin development. Therefore, the plugin represents our best in programming, structure, documentation as well as cutting edge UI/UX (user interface/experience). To learn more about why we wrote this plugin, you can click here for the official Google Font Manager blog page: http://butlerconsulting.com/new-google-fonts-plugin/

For geeks or code explorers, we have written extensively about how this plugin was made and what we think makes it super neat and special. Since it was written as a training tool, it has been over documented to say the least! To learn more about how this plugin was made, you can check out the technical blog here: http://plugins.butlerconsulting.com/google-font-manager-blogpage/

What’s next in development for this plugin.

Besides squishing any bugs (or “unexpected features” as we like to call them) that might pop up from time to time, we don’t have any really huge plans for this plugin. As it stands, we think the plugin is pretty cool and does what it needs to do. However, there are two things that we left undone on purpose.

First, we left out internationalization (translations). We did this so we could document the process as a training tool on how to add language support to WordPress plugins. We are pretty busy around here, so there exists no timeline for when we will get around to that.

Second, we have some “responsive conditionals” to put into place. As of WordPress 3.8, all of the admin pages are “responsive”. This means that they stretch, shrink and re-size depending on screen resolution; giving better access on mobile devices and tablets. Again, we intend to document the process on “how to make your plugins responsive” in the near future.

If you have any questions, comments, frustrations, anxieties or ideas concerning the Google Font Manager, please let us know via the support forums. If you like this plugin and use it, please write a quick review and rate it for us!

Licensing and Use.

This version of the plugin is free for both public and commercial use and is licensed under GPLv3 (or higher). The program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version.