Using OpenType fonts in the browser

StackOverflow https://stackoverflow.com/questions/13589179

Question

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?
Was it helpful?

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.

OTHER TIPS

I think OpenType features would be the possibility to use the ligatures between the characters in your OpenType font. It is how the browser is able to interconnect the letters and has a huge list of tags.

You can check some more details in this article: http://ilovetypography.com/OpenType/opentype-features.html.

Also you can check the tag specification in the wikipedia article. What Paul Irish and the others say that not every browser supports the features, but almost every modern browser tends to support css3 properties and one of them is the inclusion of font types via the @font-face rule. => http://www.w3schools.com/css3/css3_fonts.asp

If you need some transform on your fonts you can check the fontsquirrel service: www.fontsquirrel.com

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top