Font Pairing Preview Plugin

If you’re trying to design a landing page or some other web page and you wanted a quick and easy way to see which font pairings work best, then this plugin is for you.

The Font Pairing Preview plugin allows you to specify and experiment with any of the font families available in the Google Web Fonts directory.

Simply enter one font family name for the heading and another for the body and click a button to see an instant font pairing preview. (see example of a preview below)

You can use this plugin as a handy landing page creation tool to optimize the typography of your webpages or simply as a great guide for researching typeface pairings.

Download the Font Pairing Preview Plugin:

Version: 1.3
Requires: 3.1
Tested up to: 3.5.1
Price: FREE

download_icon

Installing the Font Pairing Preview Plugin

  1. FTP the wp-font-pairing-preview folder to the /wp-content/plugins/ directory, OR, alternatively, upload the wp-font-pairing-preview.zip file from the
    Plugins->Add New page in the WordPress administration panel.
  2. Activate the wp-font-pairing-preview plugin through the ‘Plugins’ menu in the WordPress administration panel.

Using the Font Pairing Preview Plugin

Useful tip: Try to use the Firefox browser when using this plugin because I’ve noticed that the font previews look a lot more smoother and sharper than they do in the Chrome browser.

1. Font Pairing Preview Admin Page

After you’ve installed and activated the plugin, go to the Settings menu and choose “Font Pairing Preview” as shown below:

2. Performing a font pairing preview experiment

a) After following step 1 above you will be taken to the plugin’s admin page which looks like the following:

b) Enter the required font details for the heading and body as shown in the image below and then click the “Submit” button to view the font pairing preview.

You’ll note that the plugin has a handy auto-complete functionality as you start typing (see circled element 1 in figure above). This makes it easy for you to choose an appropriate Google font type without having to look it up or remember the spelling.

When you click the submit button the “Font Pairing Preview Window” section will display a preview of your font selections and settings.

For instance if we take the values chosen in the above image we will get the following output:

9 thoughts on “Font Pairing Preview Plugin

  1. Hi,
    This is a very useful plugin in terms of being able to quickly see which fonts work best.
    However can I please request that in some future version that include a way to automatically apply the google fonts to certain pages or areas of a site?
    thanks,
    Susanna

    • Hi Sussanna,
      Thanks for the comment.
      Good suggestion and I have been thinking of the best way to achieve this.
      I hope to introduce some kind of capability which will add the google fonts automatically to your site in a not too distant future release.

      thanks,
      peter

  2. Looks like a great list of available fonts but how to know what they look like so you can pick one. Is there no preview? or am I missing something?

    • Hi Vanessa,
      there is a preview window in the plugin settings page where you can view and contrast the fonts for the title (heading) and the body.

Leave a Reply

Your email address will not be published. Required fields are marked *

20 − 7 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>