Opentype features cross-browser compatibility

218 views Asked by At

I am trying to utilise the opentype features of 'Plantin MT Pro' from myfonts. More specifically, I am hoping to use 'true' small-caps and old-style numbering. By 'true' small-caps, I mean i'd prefer not to mimic small-caps via the font-variant selector if possible.

The below css is achieving success in Chrome and Opera, but not Firefox and Safari (unsure why Safari doesn't work but Chrome does, both being webkit?).

It appears using the below CSS I won't be able to achieve exactly what I would like to based on current support, but is it possible to target specific browsers to mimic small-caps where necessary as a fallback? i.e -webkit-font-variant: small-caps;

This isn't working for me at the moment, any information to help would be fantastic. Having said that, I'm also unsure why the font-feature-settings do not work in each browser also, as advised by http://clagnut.com/sandbox/css3/

Check out my fiddle here, and test in the 4 browsers mentioned.

Thanks.

p {
  font-family: PlantinMTPro-Light, Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-style: normal;
  font-kerning: normal;
  font-size: 0.9em;
  letter-spacing: 1px;
  line-height: 1.8em;
  text-transform: lowercase;
  -moz-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  -moz-font-feature-settings: "smcp=1, c2sc=1, onum=1, kern=1";
  -ms-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  -o-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  -webkit-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
}
1

There are 1 answers

0
dungey_140 On BEST ANSWER

Unfortunately it doesn't appear that this can be achieved with the current support (Safari is surprisingly behind on this), and so I have had to take the decision to about using font-feature-settings for the small caps part of the job. I will instead use font-variant: small-caps until the adoptive rate of the browsers catches up. I will however be keeping the font-feature-settings in place for the old style numbering, so that this is displayed when supported.

I hope this is of some use to somebody, and I look forward to being able to use this feature more fully in the future.

p {
    font-family: PlantinMTPro-Light, Georgia, "Times New Roman", Times, serif;
    font-weight: 500;
    font-style: normal;
    font-kerning: normal;
    font-variant: small-caps; /* Used instead of font-feature-settings to improve x-browser compatibility */
    font-size: 0.95em;
    font-style: normal;
    font-kerning: normal;
    letter-spacing: 1px;
    line-height: 1.8em;
    text-transform: lowercase;
    -moz-font-feature-settings: "onum" 1, "kern" 1; 
    -moz-font-feature-settings: "onum=1, kern=1"; 
    -ms-font-feature-settings: "onum" 1, "kern" 1; 
    -o-font-feature-settings: "onum" 1, "kern" 1; 
    -webkit-font-feature-settings: "onum" 1, "kern" 1; 
    font-feature-settings: "onum" 1, "kern" 1;
}