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.
6 Replies
this video shows how the one is getting underline in figma
as soon as i give space after period the number 1 changes how can i use that number one in my website ?
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.
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.this one worked
thanks chris
thanks alex i will look into this for my further development.