Using Google Fonts in WordPress

The previous post describes the many advantages of using  Google Fonts on your website. This post will look at some of the ways of using Google Fonts in WordPress. First, free access to Google fonts is straight forward. Just visit the Google Fonts website, choose one or more fonts and then get the code to access those fonts in WordPress. It is here where the wicket gets sticky.  WordPress users have 5 choices for making the chosen Google Fonts accessible:

  1. Load the <link ….> statement into their WordPress header area using the WordPress Appearance | Editor command. A bit tricky for some WordPress users;
  2. Load the  <link ….> statement into their WordPress header with the help of the free CSS & JavaScript Toolbox plugin. Still tricky but opens powerful JS & CSS options in WordPress;
  3. Add the @import statements into the themes’s style.css files using the WordPress Appearance | Editor command. Still tricky for some.
  4. Add the @import statements into the themes’s style.css files using the free WPIDE plugin. Less tricky.
  5. Add the free Easy Google Fonts. Least tricky and utilizes the Customize Theme option
  6. Add the free Google Font Manager plugin. Least tricky and adds lots of extra help in using Google Fonts in WordPress.

So the rest of this post will be devoted to installing and using the Easy Google Fonts plugin and the Google Font Manager plugin. The two plugins are alike in their ability to set default Google Fonts for major HTML tags. But they differ in how users select and use Google Fonts.

Using Easy Google Fonts 

The download to WordPress is straight forward – use Plugins | Add New and search for Easy Google Fonts. Click on the Install button and activate the plugin when loaded.
The settings screen for the plugin is used to filter the Google Fonts before selecting the in the Appearrance Customize panel [works for any theme]where users get to choose the Google Fonts for use on the website.
gfafilterfontsIn this filter I am selecting bold Serif fonts to be capitalized. I have another filter that justs looks for Sans fonts. The Advanced Tab allows users to enter a Google API key so any Gooogle Font can be used.

Using Easy Google Fonts in the WordPress Editor requires two things – 1)knowledge of how to do inline CSS styling and 2)the name of the Google Fonts you want to use. See our post on previewing and delecting Google fonts to get see how to get the fontnames. Here is a sample use of the Google Fonts on a WordPress page:
gfaanyfontIn the screenshot above the inline CSS styling is highlighted. Notice the font-family name must be enclosed in single quotes. Otherwise standard CSS is used. What was strange is that even when the Easy Google Fonts plugin was deactivated, Google Fonts still could be accessed in the Word Press Visual Editor.

The other way that the plugin enables use of Google Fonts is by way of the Customize command for changing a WordPress theme’s options as seen below:
gfacustomizeHere users can set the theme’s overall font setting. But more practical is changing the the default fonts for the <p>, <h1> thru <h6> tags. As you can see the default font can be customized for font weight, text transform, text decoration plus font color, font background color, font size, line height, letter spacing under the Appearance tab. Under positioning, one can control the font’s margin, padding, border, border rounding and display setting. In sum, Customize defaults gives users maximum font appearance control. There are two downsides. First is that users do not have control of list, form, blockquote and the whole range of new HTML5 tags like aside, header, footer etc. Second, users have to know the Google Fontname, the font-family dropdown shows all the fonts in Arial style. So make sure you go to Google Fonts first and write down the names of the fonts you want to use.

But the bottom line is that Easy Google Fonts makes using them easier especially for users not comfortable with making changes to the WordPress <header> or styles.css files.

Using Google Font Manager

The download to WordPress is straight forward – use Plugins | Add New and search for Google Font Manager. Now comes the tricky part – entering a Google API Key:

gfmapikeyIf you do not have a Google API Key get one because they are handy in enabling a number of Google free web developer services. Just click the link and follow the wandering link road and get the free key. While here turn on the Style Defaults button in the lower right – this will allow you to set the default font-family and style for HTML tags <body>, <p>, <h1> to <h6> plus <ol>, <ul> and <li>. This is 3 more than Easy Google Fonts but a lot less than one could use.

Next save some headaches and  read the docs which have been thoughtfully provided under the How to Use tab:
gfmdocs
The documentation gets users well started; but if you have any doubt/problems check out the resource links which have a to aids as well. Now you are ready to choose the Google Fonts you want:
gfmpreview
This is the feature I like the most about Google Font Manager. The plugin makes it very simple to add the fonts you want. Just click on the fontname [they are in alphabetical order] and a popup panel shows the font in headline, paragraph and blockquote views. If you like the font be sure to click on the Add This Font button in the lower right corner of the panel. Choosing the fonts beforehand like this allows users to control the number of fonts that are downloaded to WordPress as a manageable number. Close the panel with the menuitem at the top right. After choosing 5 or 6 fonts [two for headings, two for paragraphs, one  for tables and one for special use], it is time to set the default settings.
gfmdefaults2Note that Google Font Manager allows users to set 4 more tags than Easy Google Fonts [<body>, <ol>, <ul>, <li>]; but Google Font Manager has much fewer options for styling the default fonts. One added feature for Google Font Manager is the ability to turn on or off the use of the !important option.

Another nice feature of Google Font Manager is that it guarantees that the Font-size and Font-Family dropdowns are enabled in the WordPress Visual Editor:
gfmveditor2The Font-Family dropdown has another nifty feature, the selected Google Fonts are placed at the top of the dropdown. This is very convenient when editing a page for font styles. This means not having to do inline styling in most cases. The one downside is that the Font Sizes are limited to 7 between  8pt and 36pt. But the big advantage of Google Font manager is that it provides two ways with Default Styles and the WordPress Visual Editor dropdowns, for using Google Fonts with Minimal fuss.

Summary

Google Fonts should be a part of your WordPress website, particularly if you want to project a refined and polished brand image. It is possible to use the free Google Fonts app directly and get all the file info necessary and add them to your WordPress site directly with one header  file change. For newbies or users uncomfortable with make code changes, the Easy Google Fonts and Google Font Manager plugins minimize the headachesof making Google Fonts accessible in WordPress. I like Google Font Manager because along with default style settings it also allows for convenient font editing in the  the WordPress Visual Editor without having to use inline styles. But colleagues swear by Easy Google Fonts. Since they are both free, try both and decide which is personally ore usable and convenient..