1. Start
  2. Introduction
  3. Installation
  4. Usage
    1. Google Fonts
    2. Internet Explorer Fonts
    3. Advanced - Custom Elements

Font Uploader

Easily Customize the Fonts on Your Wordpress Site


This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.

Introduction


This plugin lets you upload your own font files and apply them to any element of your website without requiring

a knowledge of html or css. All .otf and .ttf font files are supported.

Installation


To install:

  • Upload the 'font-uploader' folder to the `/wp-content/plugins/` directory
  • Activate the plugin through the 'Plugins' menu in WordPress
  • Click 'Font Uploader' beneath the Appearance menu
 

Usage


Google Fonts

Google Fonts are found at http://www.google.com/webfonts

To use Google Fonts for your website, first go to your Dashboard and select Font Uploader then Google Fonts. Now from the Google Webfonts page, find the font you would like to use and select "Quick-use". Once you have the font you want find the blue box that says "Add this code to your website". Copy that code and paste it into the Font Uploader section labeled "Google Font URLs".

Note that there is a section for Headers, Lists, and the Body just like normal. You may specify the Font you want for each of these sections. Once you have the code pasted above, it asks for the name of the Google Font. For example if you want to set the font for Headers and are using Tangerine, then type Tangerine in the corresponding box. Save Changes.

Please note that the normal Fonts at the top, if you have selected any, will override the Google Fonts.

 

Internet Explorer Fonts

Internet Explorer only supports embedded fonts if they are in the ".eot" format, which is a propietary font format by Microsoft only supported by Internet Explorer. This means that for 100% cross browser support, unless you are using Google webFonts, you must define two fonts for every single element:

one in .otf or .ttf format, for browsers such as Chrome, Safari, and Firefox, and one font type for Internet Explorer.

To make your fonts 100% cross browser compatible, you first need to convert a regular font file (.ttf or .otf) and convert it to .eot. Sebastian Kippe has made a wonderful little tool for doing this. The ttf -> eot font converter can be found at "http://ttf2eot.sebastiankippe.com/".

Once you have converted your font, upload it with Font Uploader and choose the element you wish to apply it to in the "Internet Explorer Fonts" section. You will also want to select the same font, except in the regular .ttf or .otf format, for the same element, but in the "Fonts" menu for display in all other browsers.

 

Advanced - Custom Elements

For this section it is Recommended that you have a basic knowledge of HTML/CSS and the inspector tool in Chrome, Safari, or Firefox's Firebug.

This option allows you to change the font of any element on your website. To do this, from your WordPress dashboard click Font Uploader -> Advanced - Custom Elements. First it asks for an element ID or class to alter (IDs and classes, next paragraph). Then, just below that you can specify which font to use on that element. After that, repeat for any other elements you wish to change, then click Save Changes.

To locate and identify an ID or a class in Chrome and Safari, first you must go to your webpage and find what it is you want to 'fontify'. Once you have located the element, right-click on it and then select 'Inspect Element'. The 'Inspector' will pop up showing the selected element. It will be highlighted. To change the single element, use the ID (#example). If no ID is available, use the class (.example). Note, if you use the class, other elements may be effected by the font change if they share the same class.

You may use selector hierarchy in the same way as CSS. For example: "#sidebar li a.title"