Font-Feature-Settings: What Is the Correct Syntax

font-feature-settings: What is the correct syntax?

Well, the best place to look for how 2013 web features should work would be the W3 CSS3 Specification:

If present, a value indicates an index used for glyph selection. An value must be 0 or greater. A value of 0 indicates that the feature is disabled. For boolean features, a value of 1 enables the feature. For non-boolean features, a value of 1 or greater enables the feature and indicates the feature selection index. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. If the value is omitted, a value of 1 is assumed.

This means that "liga" 1, "liga" on and liga all do the same thing.

As BoltClock mentioned in his comment on the question, "feature=value" isn't valid syntax, and seems to be something specific to Firefox.

Opera and IE (<10) do not support font-feature-settings at all, so the -o-* and -ms-* attributes are presumably useless.

Overall, a working syntax for all currently supported browsers would appear to be:

.element {
    -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
       -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
       -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
            font-feature-settings: "kern", "liga", "case"; /* No variation */
}

How to set default font feature settings?

It’s possible the way you have tried, but Chrome and IE don’t support it; Firefox does.

CSS Fonts Module Level 3 is somewhat obscure, as it does not contain a formal description of what is allowed inside @font-face, but since section 4 Font Resources seems to be meant to describe
@font-face and it defined font-feature-settings as a descriptor, your approach should work. It also described in MDN info on @font-face. However, the W3C CSS validator rejects it, perhaps due to the obscurity of the spec (Candidate Recommendation).

I tested this using the Google font Source Sans Pro and the ordn feature. Though the following code does not run unless you have Source Sans Pro suitably installed locally, it ullustrates the approach in a simpler setting:

<style>
@font-face {
    font-family: Source Sans Pro;
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix')  
      format('embedded-opentype'),
    url('sourcesanspro-regular-webfont.woff') format('woff'),
    url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    -webkit-font-feature-settings: "ordn";
       -moz-font-feature-settings: "ordn";
         -o-font-feature-settings: "ordn";
            font-feature-settings: "ordn";   
}
.no-ordn {
    -webkit-font-feature-settings: "ordn" 0;
       -moz-font-feature-settings: "ordn" 0;
         -o-font-feature-settings: "ordn" 0;
            font-feature-settings: "ordn" 0;   
}
.ordn {
    -webkit-font-feature-settings: "ordn";
       -moz-font-feature-settings: "ordn";
         -o-font-feature-settings: "ordn";
            font-feature-settings: "ordn";   
}
p {
    font-family: Source Sans Pro;
}

</style>
<p>1st 2nd 3rd 4th
<p class=no-ordn>1st 2nd 3rd 4th
<p class=ordn>1st 2nd 3rd 4th

The first paragraph should shot 1st 2nd 4th with the letters as superscript glyphs, and this is what happens in Firefox. The second paragraph is just for testing that a font feature set on a font can be overridden in normal CSS for some elements. The third paragraph is for testing that the browser supports font features at all.

vscode: update to stylistic sets using font ligatures with Fira Code

I noticed that the stylistic sets would work better, but not perfectly, if I disabled this setting:

"editor.letterSpacing": 0.2,

I filed an issue with vscode, https://github.com/microsoft/vscode/issues/84018 where I learned that you should add the calt set to your ligature settings ala

"editor.fontLigatures":"'zero', 'ss02', 'ss03', 'ss04', 'ss05', 'calt'",

Thanks to alexandrudima.

And then I noticed a number of people were having similar issues, https://github.com/microsoft/vscode/issues/84917

Two important points to get stylistic sets working:

1. In your OS font manager, uninstall older versions of Fira Code if you were using it before first, and then install Fira Code v2. And restarting the OS and vscode afterwards is probably necessary.

2. You will almost certainly need to add calt to your list of whatever new sets you wish to use just to get other sets working.

Ligatures (and fonts) in IE10

I actually found some of the documentation on this out there a little unclear and that's what lead to the gap.

The important idea here is to have the Element using the font-face configured properly. Here's the revised declaration for .nav that works correctly (using prefix-free to add appropriate prefixing)...

(Note that I moved the fonts directory under the stylesheets directory for easier paths)

@font-face {
 font-family: 'Live-Share-UI';
 src: url("fonts/Live-Share-UI.eot");
 src: url("fonts/Live-Share-UI.eot?#iefix") format("embedded-opentype"), url("fonts/Live-Share-UI.woff") format("woff"), url("fonts/Live-Share-UI.ttf") format("truetype"), url("fonts/Live-Share-UI.svg#Live-Share-UI") format("svg");
 font-weight: normal;
 font-style: normal; }

There's also a little more descriptive work added to the font face to make it more compact, this taken directly from icomoon.

.nav, .header {
  font-family: Live-Share-UI;
  font-feature-settings: "liga","dlig";
  text-rendering: optimizeLegibility;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-smoothing: antialiased;
  position: fixed;
  text-align: center;
  z-index: 50;
  margin: auto auto 1em auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em; }

As a final note, I'm actually doing this in SASS and using these original code:

@mixin ui () { 
  font-family: Live-Share-UI;
  font-feature-settings:"liga","dlig";
  text-rendering:optimizeLegibility;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; 
}

.nav, .header{ 
  @include ui();
  position: fixed;
  text-align: center;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto auto 1em auto; 
  right: 0;
  height: 1.5em; }

So, in short: Apply dlig 1 to the element, not the font face.

---

Related Topics