Search code examples
csswebfontsopentype

How to set lining numerals in a webfont?

I've been integrating with a webfont in Brackets (eot, ttf, woff) and can't seem to get right of the old style numerals using

.lnum {
    -moz-font-feature-settings:"lnum" 1; 
    -moz-font-feature-settings:"lnum=1"; 
    -ms-font-feature-settings:"lnum" 1; 
    -o-font-feature-settings:"lnum" 1; 
    -webkit-font-feature-settings:"lnum" 1;  
    font-feature-settings:"lnum" 1;
}

I'm starting to wonder if the font I'm using even has normal numerals as I've double checked everything a bunch of times. Is there a way to check all the special characters contained in a webfont and possibly to call the numerals through a special character code?

Solution

  • Your rule with font-feature-settings and its vendor-prefixed variants works as such (the syntax with the value "lnum=1" is outdated but does not really disturb here), if the font used has lining figures. In a Windows system, you can check that it works (in modern browsers) by setting font to Constantia, which has old style numbers by default and lining figures selectable with font feature settings.

    You can use the free DTL OTMaster Light program to inspect a .ttf font to see whether it contains lining figures (select “Tools”, “'GPOS'/'GSUB' Table Viewer”, select “'GSUB' Table” in “Layout Table” dropdown and then look for “lnum” in the “Feature” dropdown).

    It is quite possible that in conversions from one font format to another (e.g. from .ttf to .woff), font features are lost, depending on the conversion software. When using the FontSquirrel WebFont generator, select “EXPERT” mode and check “Keep All Features” or list the features you want to keep, in “OpenType Features:”. If this fails to preserve the feature you need and if you wish to use e.g. only lining figures from a font, try the “Opentype Flattening:” option.