how did the font changed automatically ?

i used the same font in figma and on my website but somehow the number 1 doesn't have line under it ? how can i solve it ? first image that number 1 doesn't have underline is website. second image has underline is a figma. third image of font book.app shows that it has two characters of number 1 with and without underline.
No description
No description
No description
6 Replies
peterpumkineaterr
this video shows how the one is getting underline in figma
peterpumkineaterr
as soon as i give space after period the number 1 changes how can i use that number one in my website ?
Alex
Alex3w ago
I don't know why it's changing like that in the figma file, but alternate characters are usually accessed by turning on stylistic sets. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates If you can find the font listing on the foundry website you may be able to look up the one you need, otherwise you can experiment with the numbers.
MDN Web Docs
font-variant-alternates - CSS: Cascading Style Sheets | MDN
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
Chris Bolson
Chris Bolson3w ago
Try setting this on the element where you want to use this version of the number: font-variant-numeric: tabular-nums; By adding the "." after the number, presumably Figma is assuming that it is going to be a list of ordinals so is automatically applying that style? Alterantively, if what you have is a list, just using <ol> should be enough to use this font variation, at least it did in my quick test.
peterpumkineaterr
this one worked
font-variant-numeric: tabular-nums;
font-variant-numeric: tabular-nums;
No description
peterpumkineaterr
thanks chris thanks alex i will look into this for my further development.
Want results from more Discord servers?
Add your server