FontFace Plugin

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.

External requirements: The used font needs to be uploaded into the plugin's ”./fonts/“ directory first. The font files that need to be uploaded depend on the embedding technique you use.

To help you decide on the technique, see Comparison of web fonts solutions on SocialCompare.com

You need four files to accomodate for all different browsers:

• <fontFile>.eot
• <fontFile>.woff
• <fontFile>.ttf
• <fontFile>.svg

Here you will find ready-made font packages which will already contain all four of them: http://www.fontsquirrel.com/fontface

You don't need to upload any files. You can use any of the fonts listed here: http://www.google.com/webfonts

You can add variants into the “fontFile” option, e.g. 'Expletus+Sans:regular,bold'.

You don't need to upload any files. You can use any of the fonts listed here: http://kernest.com/

The file you need to upload:

• <fontFile>.font.js

You can generate that file here: http://cufon.shoqolate.com/generate/

The file you need to upload:

• <fontFile>.typeface.js

You can convert fonts here: http://typeface.neocracy.org/fonts.html

Be aware of choosing the correct variant of the font. If your headings are bold and you choose the regular variant, this technique won't work.

The file you need to upload:

• <fontFile>.swf

You can create that file here: http://www.sifrgenerator.com/

• technique: Font embedding technique, with a choice of 'fontface' (@font-face), 'google' (Google Font API), 'kernest', 'cufon', 'typeface' and 'sifr'
• fontFile: Font file name (without extension; needs to be uploaded first, see instructions)
• fontName: Font name (as used in CSS; not needed for Cufón and sIFR)
• headings: Which headings should be affected? (needed for Cufón and sIFR or when styles should be automatically added)
• addStyles: Add styles automatically? (Styles for Cufón and sIFR are always added automatically, the others can be used as usual in your CSS files)
• genericFamily: Generic font family (serif, sans-serif, monospace, cursive, fantasy)

• initial commit, version 2011-05-22 (2011/05/22 16:41)

Have a look at bugs, feature requests and ToDos in the bug tracker.

Before reporting any issues (bugs or requests), please first take a look at the FAQ on plugin problems.

You can report any issues either on the Issue Tracker or here in this section.

Having some trouble getting this working 100% with Google Ubuntu font. These are my settings:
Google Font API
fontFile: <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
fontName: font-family: 'Ubuntu', sans-serif;
headings: h1 only checked
addStyles: checked
genericFamily: sans-serif

The font appears on the site, but bold and italic do not work. It's probably something simple in the setup that I'm missing but I can't see what it is. Suggestion?

The settings should be the following instead:
fontFile: Ubuntu:400,400italic,700,700italic
fontName: Ubuntu
— Anika HenkeAnika Henke
ach

London, UK 2011/08/06 12:46