Recently one of my clients requested to use an alternative font on their website. After examining the various font replacement possibilities I naturally chose for the full CSS @font-face replacement.
What a relief to work with this full CSS solution, it is working perfect. Easy font editting within the WYSIWYG editor as they appear in the front- and back- end of the website.
For convenience I created a nice WordPress plugin which makes working with replacement fonts through the css @font-face a breeze.
note: this plugin depends on TinyMCE Advanced plugin.
- Autoloads generated @font-face packages
- Fully compatible with most browsers
- Auto generates classes for the autoloaded fonts
- Includes the required CSS files in TinyMCE editor
- Auto creates TinyMCE @font-face styles
- Additional CSS possibities through dashboard settings
- All above auto options can be managed in the dashboard
Load in admin
When ticked the plugin will load the necessary CSS in the dashboard so you are able to replace fonts inside the administrational area. Not to confuse with the TinyMCE area which is another option!
Load CSS in tinyMCE
When ticked the plugin will autoload the required CSS in the WordPress TinyMCE editor. When additional CSS options are selected these will also be included.
Generate CSS class for each font
The ease of use of this plugin is mainly because of this option. When ticked the plugin will generate a CSS classname for using the autoloaded font. The font family name is read from the font generated package.
The class name which is generated is the folder in which the font is placed.
For the font-family CSS code this plugin automatically parses the generated
CSS code from fontsquirel.
Load generated CSS class(es) to tinyMCE styles
If ticked the plugin will add the autogenerated class(es) to the style dropdown box of TinyMCE.
With the additional CSS textarea you are able to manually add CSS elements to the plugin. These will be loaded together with the selected options if preferred. Meaning you are able to change the front-end headers or even the dashboard fonts easily.
I should have explained more thorough that the following plugin is required: TinyMCE Advanced. When activating TinyMCE Advance in the settings you are able to drag the Format and Style dropdown boxes to the TinyMCE menu.