DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:fontface

This is an old revision of the document!


FontFace Plugin

Compatible with DokuWiki

2008-05-05, 2009-02-14, 2009-12-25 "Lemming", 2010-11-07 "Anteater", 2011-05-25 "Rincewind", Angua

plugin Embed a special font for headlines (with either @font-face, Google Font API, Kernest, Cufón, typeface.js or sIFR)

Last updated on
2011-05-22
Provides
Action
Repository
Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to googlefonts

Tagged with fonts, style, typography

Installation

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

@font-face

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

Google Font API

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'.

Kernest

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

Cufón

The file you need to upload:

  • <fontFile>.font.js

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

typeface.js

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.

sIFR

The file you need to upload:

  • <fontFile>.swf

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

Configuration and Settings

  • 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)

Cookies

The plugin itself doesn't use any cookies. But if you choose to use sIFR, that third-party plugin will add a cookie “to prevent needless pre-fetching” of the Flash file it uses. See sIFR's configuration documentation for more information.

Development

Change Log

Known Bugs and Issues & ToDo/Wish List

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

Discussion

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 Henke 2011/08/06 12:46
plugin/fontface.1338035909.txt.gz · Last modified: 2012-05-26 14:38 by ach

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki