Search code examples
cssfontscross-browseropentype

Using OpenType fonts in the browser

A particular font variety (with ligatures) that I would like to use is only available as OpenType.

I am trying to work out which browsers will be able to display it properly, and how I should add it to the CSS.

I have found this article from July 2012, with contributions from Paul Irish among others, suggesting it is probably authoritative:

http://www.typotheque.com/articles/opentype_features_in_web_browsers

But I don't understand the distinction it makes between OpenType fonts, and OpenType features: 

But while all modern browsers can display OpenType *fonts*, only Firefox 
(since version 4) [1], Internet Explorer 10 (preview version)[2] and 
the latest versions of Google Chrome[12] are currently able to display 
OpenType *features*.

So:

  1. Can I use this OpenType font in modern browsers? What is the difference between OpenType fonts and features? I would like to be able to display ASCII characters and ligatures.
  2. How should I actually include this OpenType font in the CSS?
Solution

  • The practical way to have your font (a font that you may legally use as a downloadable font) used in browsers is to use a service like FontSquirrel @font-face Generator to create the different font formats needed and to use the CSS code it produces, with discretion (it may need tweaking if you italics, bold, or any other typeface than regular).

    Provided that the font originally has ligature definitions in it and that the converter preserves the information (you need to run some tests after conversion), “standard” ligatures will be used by default in modern versions of Firefox. To make Chrome and Safari use them, add the CSS declaration

    text-rendering: optimizeLegibility

    (to be applied to whatever elements should be rendered with ligatures), and to cover IE 10 as well, also add

    -ms-font-feature-settings: "liga";

    and just for safety, add the proposed standard setting as well:

    font-feature-settings: "liga";

    I think this gives you all that you can get now or in the near future.

    If the font contains definitions for contextual (clig), discretionary (dlig), or historical (hlig) ligatures, you can enable them on some browsers. For example, the following enables discretionary ligatures in addition to standard ligatures:

    -ms-font-feature-settings: "liga", "dlig";
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";

    You can test these using the Google web font Source Sans Pro, which has standard ligatures for “ff” and “ft” (distinguishable from non-ligature rendering at least in sufficiently large font size).

    Regarding the theory, OpenType is a specification and a font format, which allows typographic information embedded into font files, among other things. Browsers may support the format without supporting the use of the embedded information.