hi, I am working on a varfont with a large set of numerals. I like to access them in VSC. How does the tags such as .alt01, .tf, tnum etc become accessible in code? Can I add it as a class and so how?
I tested 
.tabular-nums{
font-variant-numeric: tabular-nums;
font-feature-settings: “tnum”;
}
But it does not really work
You need to have them accessible via OpenType features.
In your CSS, you can access OT features like this:
#my-item {
font-family: "Myfont";
font-feature-settings: "numr" 1;
}
I just read your last amended paragraph. What doesn’t work? Don’t forget to set the feature to True by adding 1 after your feature name, like in my code. Otherwise, are you sure your OpenType features work? Try them in an application like fontgauntlet.com.
Hi, thank you. I am on it. Testing right now. I be back.
Hi @SCarewe
Nope. I do not get it to work. If I create Oldstyle Figures, I get the suffix .osf.
If I generate the features I get : onum Oldstyle Figures
and the code states “sub one.tf by one.tosf;”
And CSS states “onum”.
What am I missing? It is quite confusing.
Does the feature work correctly in Font Gauntlet?
Sorry. I am not allowed to upload the font on a external platform, so I can not text.
Font Gauntlet runs offline, no files are transmitted/uploaded.
How are you testing your fonts?
I test in vsc and firefox, indesign, figma.
In InDesign, how are you testing your font? This might well be a font cache issue. Read this:
I am grabbing for anything. The CSS is now.
p.p400 {
font: 6rem FontnameVF;
font-variation-settings: ‘wght’ 400;
font-variant-numeric: oldstyle-nums;
-moz-font-feature-settings: “onum”;
-webkit-font-feature-settings: “onum”;
font-feature-settings: “onum” 1;
}
Have you been able to verify that your OT features work correctly, in InDesign, for instance?
Please consider confirming this through an application like FontGauntlet (where no files are uploaded, everything runs locally).
Hi @SCarewe
If I export and install an OTF, the features are available in InDesign,
but varfont axes such as “wght” are not available.
If I export and install a varfontTTF, the features are not available in InDesign,
but the varfont axes form “wght” are available.
But what I want is to access “oldstyle numbers” in CSS. And what I think is that Glyphs might not export the correct features that I need.
I am not really looking for accessing the varfont range.
I am looking for accessing the different figures, such as oldstyle figures, tabular figures, etc
OTFs are static fonts, not variable fonts, so you won’t be able to use a variable font axis.
Can you please test your variable font in InDesign using the method I linked above?
Can you send us the Glyphs file so we can have a look? Either as private message here on the forum or to support.
Hi, I don’t have the option to upload or share a corporate font, because I am bound by a license agreement. That’s the perks of working with corportations. I thank you so much for your support. I hope to find the solution soon. If I find it I will post it. All good, Carolina Laudon
What are the names of your glyphs?
There should be a set of normal digits named like
with a matching set of tabular digits named like
Then, go to File → Font Info… → Features and click Update.
In the sidebar, a feature named tnum should appear with code like this:
sub one by one.tf;
sub two by two.tf;
sub three by three.tf;
Then, you should be able to use tabular numbers in CSS.
Here is my code. I am going to test another varfont to see if I can extract the numeral
The code you posted looks OK. Could you post the code for the tnum and onum?
Could you show your HTML rendered in a browser? VSC will not apply the CSS in the HTML source code view.
