About Google Font Manager

Plugin Documentation – How to use this plugin. (This is a temporary holder… It is a duplicate of the help content inside the plugin. There will be more information coming very soon.)

Currently, Google fonts currently has 0 fonts available for both public and commercial use. You may utilize them in your websites and other
applications. Using these fonts can extend your website designs, enabling you to achieve a unique look and feel to your site. After all “a picture is worth 1000 words” and typography allows you to paint pictures with words.

This plugin was written to help you quickly and easily add Google fonts to your WordPress website. It was designed with both the experienced programmer and the novice WordPress user in mind. With minimal overhead, it will not add
any unnecessary “bloat” to your site, adding only what you need according to your settings. You can use this plugin to simply add Google fonts to your site and reference them in your own custom style sheets (if you are using a
child theme). Or, if you are not coding your own theme, there are a variety of ways you can use the built-in functions of WordPress to make use of the fonts you add. Either way, it provides the perfect solution for adding Google
fonts to your website.

Finding, Previewing & Adding Fonts.

This plugin makes it super easy for you to find, preview and add Google fonts to your website. Finding a font that is perfect for your website couldn’t be easier! Simply click on
the “Preview Fonts” tab and a list of the 0 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. 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 font you wish to add.
It’s that simple!

Getting your API Key.

In order to use this plugin you will need to register a “project” with Google and get an API (Application Program Interface) key. The API key is free to obtain and simple to get.
However, some people are confused as to how to obtain an API key and how to use one. The easiest way for you to understand this is to watch the video located in the upper right hand corner of your screen. It is really quite simple and straight
forward. Once you have an API key, simply enter it into the space provided in the settings and you’re off to the races!

Options for regular users.

For the average WordPress user, we have incorporated two ways for you to use the Google fonts you select in your website. The first way is turned on by default. The second way must be enabled, but gives you a great deal of modular control over
how your newly embedded fonts are applied. First, you must add one (or many) of the 0 Google fonts to your site. Adding fonts is quite simple. You start by typing the name of the font you want in the “Google Font
Selector” form field (located in the upper-right corner “meta box”) and select it from the drop-down. This adds the font to your site by linking the Google font style sheet in your website header (no programming required).

Once your fonts have been selected, by default they are automagically added to the WordPress Visual Editor (tinyMCE). This is the same WYSIWYG (what you see is what you get) editor that you are probably familiar with for creating your content in
posts and pages. The only difference is that you will now find a “Font Family” option in the editor added by the plugin (you may turn off this feature if you want). You can apply any selected font to your content by highlighting the text selection
and choosing the font you want to apply form the font family dropdown.

The second way you can apply fonts is by enabling the “Style Defaults” in the settings. This is turned off by default and you must enable it. Once you do, you will be able to click on the tab labeled “Default Styles”. From there you are able to select font choices to be applied
to each of the basic content types, like the “body” tag, paragraphs, header tags (<h1>, <h2>, <h3>, etc.) and other text elements. You may also click on the “advanced arrow” and apply further style properties like bold, italic,
color choices and the like (keep in mind these options will overried the styles that came with your theme).

Basic use (for programmers).

If you are using your own style sheets and comfortable with writing CSS, LESS or SASS, you can make immediate use of this plugin. Just add new fonts to your site in the same way as described above. Once added, simply reference the font name in your CSS file likes so:

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

To extend the font properties, you may do so in the usual way by adding additional CSS conditions to your code (i.e. “font-weight: bold;”). 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; }
            

NOTE: If you are an advanced user who is directly editing your style sheet (as with a child theme), you will not want to enable the “Style Defaults” option. If you do, you may have to use the “!important” constructor in your CSS to override the default settings added by
the plugin. This is because the “Style Defaults” are applied by the plugin directly to your website header after your themes style.css sheet is loaded.

Full Documentation & Resources.

The Google Font Manager WordPress plugin was written as a learning exercise to demonstrate our methods for writing plugins. We utilize this plugin at ButlerConsulting.com to teach our programmers how to approach plugin development. As such, the end product represents our best in UI
(user interface) and UX (user experience) design while demonstrating our approach to writing plugins.

As with any programming, there are multiple ways to approach a problem and arrive at a solution. Some solutions are more efficient than others and not all programmers will agree that our methods represent “best practices”. We are good at what we do but we are not infallible. If you are
an experienced programmer, and you see something we could or should improve, please let us know.

You may access full documentation via the “readme.txt” provided with the plugin. For more information you may visit the following resource links:

Leave a Reply