CODEWITHSUNDEEP
cssfonts
Volker E.
Volker E.

Reputation: 6035

How to find out which `font-feature-settings` safe web fonts (Arial, Georgia, Tahoma) / any font do support?

I tried to implement CSS3 font-feature-settings lining figures, in particular with Georgia (Windows 7, OpenType), but Georgia* does seem to just support oldstyle figures.

Widest supported syntax, originating from https://stackoverflow.com/a/15161336/1696030

.ffs--lnum {
    -webkit-font-feature-settings: "lnum";
       -moz-font-feature-settings: "lnum=1"; /* Fx 4 to 14 */
       -moz-font-feature-settings: "lnum";   /* Fx 15 onwards */
       -moz-font-feature-settings: "lnum" 1; /* Fx 15 onwards explicitly set feature values */
            font-feature-settings: "lnum";   /* other features for comparison: c2sc=1, smcp=1 */
    font-variant-numeric: lining-nums;
}

Here's also a Codepen including my attempts so far.

How can I find out which font-feature-settings a certain font (web safe/webfont) is supporting without trial and error? Are there certain applications that show those? I don't necessarily care about platforms, all inputs are welcome.

Edit (*): Georgia's installed in v. 5.00, and as much as it's an interesting note, it is not the main topic of this question.

Upvotes: 1

Views: 560

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53598

Remember: the CSS "web safe" fonts make no assurances whatsoever about which versions of those fonts get used. Two versions of Georgia or Arial, ten years apart, can be rather different beasts. CSS default families (both the web safe fonts and the generic family categories) are not meant for when you need to control the typesetting of your content, rather they're for when you don't care about typesetting but just need the text broadly styled in a way that will at least work cross-platform and cross-browser.

If you do care about controlling the typesetting, which you clearly do: use an actual font. Use something like Typekit, or host your own version of the exact font you need, and then link to that with a @font-face rule, with the guaranteed assurance that the font is going to support exactly the features you need for typesetting.

Upvotes: 1

Related Questions