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:
Tested up to: 3.5.1
Installing the Font Pairing Preview Plugin
- FTP the wp-font-pairing-preview
/wp-content/plugins/directory, OR, alternatively, upload the wp-font-pairing-preview.zip file from the
Plugins->Add Newpage in the WordPress administration panel.
- 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: