CODEWITHSUNDEEP
cssfontsopentype
Afterlame
Afterlame

Reputation: 1248

How to set default font feature settings?

How to set default font feature settings per font?

I am using two different fonts in my current project and want to enable font-feature-settings on both of them. Currently I have to do this via the * selector:

*, *:before, *:after {
  -webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
     -moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
      -ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
          font-feature-settings: "kern", "liga", "pnum" "ss01";
}

So far so good; this way I set kerning, ligatures and proportional numbers as a default. The problem is the alternative stylistic set. I want to have this one on every instance of one of my fonts. The other font has another stylistic set, which I do not want to use.

My prefered way would be to incorporate defaults in the @font-face like this:

@font-face {
  font-family: 'FFDin';
  font-weight: normal;
  font-style: normal;

  -webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
     -moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
      -ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
          font-feature-settings: "kern", "liga", "pnum" "ss01";

  src: url("fonts/DINWeb-Light.eot");
  src: url("fonts/DINWeb-Light.eot?#iefix") format("embedded-opentype"),
       url("fonts/DINWeb-Light.woff") format("woff"),
       url("fonts/DINWeb-Light.ttf") format("truetype");
}

I have tested this in chrome, but it does not work. Is there any way to declare the default font-feature settings per font?

Upvotes: 6

Views: 5648

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201668

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.

Upvotes: 5

Related Questions