Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use nice webfonts on your WordPress blog

Thursday, April 18th, 2013 by Servage

Managing typeface on a blog can be done via plugins. Most popular ones draw upon knowledge of CSS. In this tutorial I selected a powerful plugin, simply called Font.  To follow this tutorial, all you need is access to the Admin area and the free Font plugin installed. No coding of CSS is required.

Step 1 – Overviewing Plugin

There Font plugin works in two areas on your site. First, when viewing the front-end of your site, the admin toolbar now has “Font Settings.”

 

Second, in your post editor, the TinyMCE, now has an “F” button in the editor, plus above the editor, it reads “Fonts for Web.” Both of these will all activate the Font Editor.

On the back end, the Font Editor opens six buttons (see pic). The 2 main tools are:

  • Font
  • Size and color

In addition to these buttons, the front end Font Editor will open a few more settings to manage Presets. More on those in Step 4.

Step 2 – Font Browser – Main Tool

Let’s stick to the back end for this part of the tutorial. Once you understand this, the front end stuff is easy.

With the Font Editor open, highlight some text in the post area and click the font button. This opens the Fonts Browser which previews how text appears. The browser first lists font categories, then subcategory list, and then list of typefaces. Click on any font you wish to apply to your highlighted text.

 

Once you have selected a font you wish to use, click the X on the font browser to close it.

Note: You have altered the CSS for this part of your site’s content. At this point, the alteration is not permanent – you can click “undo” in the TinyMCE editor.

When you Update or Publish the post, the altered text is saved to your site.

Step 3  – Size and Color Editor

Click the second black button “Size and Color.” The Sizing tool uses a slider from 1 pt to 100 pt.

Tip: You can type in a number greater than 100 and the tool will accept it.

For color adjustments, the plugin’s editor is easy to use, but I suggest going with the TinyMCE color editing tool (More colors). This matches what the Font plugin offers.

Step 4  – Front End – Theme Element Adjustments

Once you understand Font Editor and Size Settings, the Font Settings on the front-end are easier. In addition to 6 buttons noted in Step 1, there are 5 additional buttons. Presets and Element pickers are the primary tools here.

First “Pick an element from the page” (blue button) which allows selection of any part of the page where text appears. Once an element is picked, naming must happen for any other other action to occur. Fortunately you aren’t stuck with the element as explained below (deleting presets).

Once an element is named, it is added to presets. Presets are saved indefinitely. You can select more individual presets, or optionally you can choose a preset and use the green button to add elements to an existing preset. I suggest playing around with the settings and familiarize yourself with the available options. Your site might look a bit crazy, but the next  paragraph will let you undo these changes.

Deleting presets is easy and provides an escape clause so these changes aren’t actually permanent. To delete a preset, simply choose it from the presets, and press the red x box, then press “save” again. You are back to the themes default settings.

Additional notes

Congratulations, you are now adept at not only using this Font plugin, but at manipulating the text elements throughout your blog. And you didn’t really need to know CSS to do any of this.

Not all typefaces in the Fonts Browser are free. Most are, but the site shows licenses for each font, which you may want to review. With that said, I do wish this plugin made use of all the free Google Fonts. However, I feel this plugin is best of what’s around. It gets high ratings, and the developer keeps the plugin up to date.

Use nice webfonts on your WordPress blog, 5.0 out of 5 based on 2 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.