Font Customizer free WordPress plugin
Description
Font Customizer free WordPress plugin
Make beautiful Google font combinations and apply awesome CSS3 effects to any WordPress themes. Preview everything right from the WordPress customizer before publishing live. Cross browser compatible, fast and easy, the Font Customizer is the ultimate plugin for typography lovers.
Plugin Features
All settings are done from the WordPress customizer in live preview (screenshots here), which makes this plugin easy as breeze and a really enjoyable experience to use.
Compatible with any WordPress theme
Cross Browser Compatible (Tested in all major browsers)
Live preview is integrated into the WordPress Customizer with a beautiful user interface
Customize main body font, links, headings, blockquotes
Select among 650 + Google and websafe fonts in live preview
Apply 40+ CSS3 effect like 3D, shadows, emboss, outile, neons…
Style CSS properties : color, hover color, font size, line height, font weight…
Reset controls to default settings (one by one or all at once)
Recommended Google fonts combinations
The Font Customizer plugin allows you to easily combine fonts on your website. It is important to choose the right Google typography pairings for headings and paragraphs in order to catch your reader’s attention.
Below, you’ll find some well known examples of Google fonts that worked very well together.
Lobster + Droid Sans (more pairings)
Bitter + Source Sans Pro (more pairings)
Dancing Script & EB Garamond (more pairings)
Dosis + Open Sans (more pairings)
Fjalla One + Open Sans (more pairings)
Lato + Grand (more pairings)
Oswald + Droid (more pairings)
Performance
The Font Customizer plugin has been developped with performance in mind. All stylesheets and scripts in front and back end are minified.
The generated stylesheets with the custom fonts settings are written in head section the following way :
The Google font families are requested very early in head to avoid any Flash of Unstyled Content (FOUC) in any browsers
The plugin uses the best recommended practices to optimize Google fonts load time in your webpages (learn more about the Google Fonts API)
The CSS properties are loaded after your main stylesheet
To improve php performances, all settings, once saved in the customizer, are stored as database options (cached by WordPress when get_option is called) into the database : default settings, custom settings, Google fonts.
Translations
The plugin is translation ready, the default .mo and .po files are inluded in /lang.
For Developers
This plugin offers a modular structure based on a comprehensive hook’s API (learn more about WordPress filters and actions) and it uses the bests WordPress coding standards which makes the Font Customizer very easily extensible, without ever needing to modify the core structure.
Credits
RequireJS 2.1.14 by The Dojo Foundation, MIT or new BSD license
iCheck v1.0.1 by Damir Sultanov , MIT Licensed
Selecter v3.0.9 by Formstone , MIT Licensed
Stepper v3.0.5 by Formstone , MIT Licensed
Selection of font resources
General resources
Choosing Types Principles
Four techniques for combining fonts
8 tips Combining typefaces
Rules for beautiful typography
Principles for beautiful Typography
The Noodle Incident’s CSS and Text
W3 Schools: CSS Fonts
About.com’s Web Design (CSS): What is a Font
The Noodle Incident’s Tutorial on Typography
HTMLHelp’s Font Properties
HTML Source: Text Formating
University of Minnesota Creative Standards Guide: Text and Fonts
About.com’s Web Design: How Many Fonts are Too Many
Thinking with Type
Font Size Resources
W3c’s Care With Font Size
CSS A List Apart: Size Matters
BIG BAER Explains CSS Font-Size
MIS: Using Relative Font Sizes
WebDevRes: CSS Font Size Control and Recommendations
Font Troubleshooting
Internet Explorer Font Sizing Bugs
Internet Explorer Font Size Inheritance