Graphite

A free and open rendering engine for complex scripts

Common Navigation Links

Project Navigation Links

Using Graphite in Mozilla Firefox

        Graphite in Firefox
        Switching on Graphite in Firefox 11+
        Testing Graphite behaviors in Firefox
        Using Graphite font features in Firefox
        Supported platforms

Graphite in Firefox

Mozilla Firefox 11 and later versions directly support Graphite on Mac OS X, Linux, Windows and Android platforms. A web page can be rendered using both local and server-based fonts, and specific Graphite font features can be controlled via CSS. This support is not switched on by default but can be easily enabled.

Switching on Graphite in Firefox 11+

The Graphite enabling that Firefox offers is currently not switched on by default. You need to go into the advanced configuration settings manager to switch it on before you can use it.

Make sure you have a version of Mozilla Firefox 11 or later installed, then go through the following steps:

Type about:config in your address bar.
Press Enter.
Click on the "I'll be careful, I promise" button. This big warning is to make sure you really know what you are doing when changing any advanced parameters, as you could easily introduce problems with core configuration settings. We will only make a small change to one Graphite-related parameter. (You should be able to go back and toggle parameters off if needed.)
Type graphite in your search bar to look for the right parameter. Firefox will show you the following configuration preference name: gfx.font_rendering.graphite.enabled. Alternatively, you can just scroll down the page to find a option called gfx.font_rendering.graphite.enabled.
Double-click on the preference name line to set the value from false to true. You will see the whole line becoming bold.

Graphite is now activated in Firefox. To see Graphite in operation, you need a web page uses some CSS referring to a Graphite-enabled font. The font can either be installed on your own system or remotely used as a web font.

A menu toggle for the Android

An extension is available that provides a menu toggle for Graphite support in Firefox on the Android.

Testing Graphite behaviors in Firefox

Now you can test content relying on smart behaviors in a Graphite-enabled font.

Go to Graphite Font Demo to see some sample fonts rendering in your Firefox browser.

Using Graphite font features in Firefox

It is possible to make use of Graphite font features in an HTML page by specifying them with CSS. To do this you must know the ID of the feature of interest in the font and the value you wish to use. This information should be included in the font documentation.

Note:

Versions of Firefox earlier than 15 do not handle feature IDs that are anything other than 4-character strings. Numerical IDs do not and are not expected to ever work in Firefox.

The following maintenance releases of SIL's Roman and Cyrillic fonts are available that use 4-character IDs: Doulos SIL 4.112, Charis SIL 4.112, Andika 1.004 and Gentium Plus 1.510.

The CSS syntax is:

<css-style-name> {
  -moz-font-feature-settings: "<feature-id>=<feature-value>";
}

However, note that this syntax is changing, and version 15 of Firefox requires:

<css-style-name> {
  -moz-font-feature-settings: "<feature-id>" <feature-value>;
}

The <feature-value> is optional and if omitted will be assumed to be 1.

To be on the safe side, you can use these two syntaxes simultaneously.

For instance, if you have a font called "My Graphite Font" and with a feature ID of 'alts', the following would define a CSS style using this font with the feature set to the value 2:

.alternate_font_style {
  font-family: "My Graphite Font", <other fallback fonts>;
  /* old syntax: */
  -moz-font-feature-settings: "alts=2";
  /* new syntax: */
  -moz-font-feature-settings: "alts" 2;
}

To indicate more than one feature, use a comma as a delimiter:

.alternate_font_style {
  font-family: "My Graphite Font", <other fallback fonts>;
  /* old syntax: */
  -moz-font-feature-settings: "fea1=2,fea2=6,fea3";
  /* new syntax: */
  -moz-font-feature-settings: "fea1" 2, "fea2" 6, "fea3"; /* fea3 is 1 or 'on' */
}

Note:

If the feature ID is shorter than 4 characters, it must be padded with spaces in CSS, e.g.: -moz-font-feature-settings: "xyz " 1.

More complete documentation of feature settings in CSS can be found at http://dev.w3.org/csswg/css3-fonts/#propdef-font-feature-settings.

For more detail on how to specify fonts on web pages see Using SIL Fonts on Web Pages.

Supported platforms

This Graphite support has been tested and is known to work on the following platforms:

Windows 7
Windows Vista
Ubuntu 11.10
Android 3.2
Mac OS X 10.7.3