Extension:WebFonts

What can this extension do?
Many languages do not have proper fonts easily available to users. This may be because the operating systems do not ship these fonts, the script has fonts but users don't know from where they will get them or how to install them in their system, or even the user is reading the wiki from a shared computer without these fonts. Sometimes it may be because the user does not know how to configure the operating system for a language or the user does not have enough permissions to do this. Because of all these reasons, providing the content in certain languages is facing issues. This extension tries to solve this by embedding the fonts in the wiki itself. Fonts will be served from the server and the user's system would not need to have the fonts installed.

Usage
When the extension is installed and enabled, along with the login, preferences link in the wiki page, a menu will appear to select a font for the page. By default, the first font in that menu will be applied to the wiki. A user can change the font and it will be remembered across the pages. Optionally user can disable the font embedding too.

If the font is available in user's local system, font will not be downloaded from the mediawiki server. It will be taken from the user's computer. Otherwise, font will be downloaded from the server only once. ie when the user selects the font first time. Next time onwards, font will be taken from the local cache.

Download instructions
Download WebFonts and put it in to a directory names  under   Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation
To install this extension, add the following to LocalSettings.php:

Configuration parameters
By default, the preference page option to enable web fonts is set to true. To change it to false, use the following line to LocalSettings.php
 * Whether the web fonts should be active as default or not
 * To enable or disable the web fonts, the user can go to My Preferences -> Appearance -> Disable font embedding (WebFonts)

Caching configuration
To ensure that the web fonts files are cached on the clients' machines, font file types must be added to the web server configuration. In Apache2 this consists of:
 * Adding font file extensions to the FileTimes regex at FilesMatch for the relevant directory, example:
 * Adding ExpiresByType values to the relevant MIME types, similarly to image MIME types.
 * Note that there's no standard MIME type for TTF. application/x-font-ttf is used for Wikimedia.
 * Adding the MIME types:
 * AddType application/x-woff .woff
 * AddType application/vnd.ms-fontobject .eot
 * AddType application/x-font-ttf .ttf

For a full example see the caching configuration update done for the Wikimedia cluster.

Adding a new Language support
Basic knowledge about GNU/Linux based operating system is required to follow the below steps. If you feel difficulty in following this, file an enhancement bug against WebFonts extension in Mediawiki bugzilla

Please note that we will add support for Free Licensed(eg: GNU GPL, SIL, etc) fonts alone.

Preparing webfonts
Fontforge can be used to generate a truetype font from its source file ie sfd file. SFD is not mandatory. If you have truetype font(.ttf) open it with fontforge, File->Generate Fonts .. Select any of the above format.

You cannot create eot font using fontforge. Use http://code.google.com/p/ttf2eot/ for converting it. Install the tool, run

ttf2eot yourfont.ttf > yourfont.eot

The font conversion can also be scripted using fontforge scipting feature. See http://fontforge.sourceforge.net/scripting-tutorial.html

For example, to convert a truetype font to svg, use the following fontforge script

#!/usr/bin/fontforge Open($1) Generate($1:r + ".svg")

You may save this script to a file named say, ttf2svg.pe, give execution permission and execute like this

./ttf2svg.pe yourfont.ttf

Similarly, for creating a WOFF font:

#!/usr/bin/fontforge Open($1) Generate($1:r + ".woff")

Adding fonts
'FontName' : { 'eot' : "language/FontName.eot", 'ttf' => "language/FontName.ttf", 'woff' => "language/FontName.woff", }  normalization : { "searchString1" : "replaceString1", "searchString2" : "replaceString2", } 'hi' :  [ 'Samyak Devanagari', 'Lohit Hindi'  ]
 * Place the fonts inside fonts folder of the extension. Create a folder for your language with its language code, and place eot, ttf, woff fonts inside it.
 * Open js/webfonts.fontlist.js And add an entry for the font. You may refer the existing fonts or use the following syntax
 * (Optional) If you want to do some normalization on the page content when you display it the font, such are replacing certain characters with other characters, you can specify it as normalization rules.
 * Add a entry to the languages section of the file. The following example maps Two fonts to Hindi(hi is Hindi's language code). The first font will be used as default font. The font names should match with the font name we used above.

By specifying font-family
Inside the wiki text YourText, webfonts extension will check whether the font is available with the extension, if so it will download it to the client. So the reader will not face any difficulty in reading the text even if the font specified is not available in their computer.

By specifying language
Inside the wiki text YourText, webfonts extension will check whether any  font is available for the giiven language with the extension, if so it will download it to the client. So the reader will not face any difficulty in reading the text even if the font specified is not available in their computer. If there are multiple fonts for the language, the default font will be used. If default font is not preferred, use the font-family approach to specify the font. if the tag has both lang and font-family definitions, font-family get precedence.

More Information

 * Writing systems - information on writing systems in MediaWiki
 * Fonts on the Web -W3C- http://www.w3.org/Fonts/
 * CSS3 WebFonts specification - http://www.w3.org/TR/css3-fonts/
 * @font-face performance
 * WebFonts assessment