Menu
I am using Google Font Poppins on my page.
I tried to format numbers using
font-variant-numeric: tabular-nums;
But it does not affect numbers appearance at all. Does any Google Font support font-variant-numeric?
I had to fallback to some web safe font for numbers, but it does not look good.
646
Google makes all the TTF files for its fonts fairly accessible.
The font-variant property is used to converted all lowercase letters into uppercase letters. But the converted upper letters appear too small font-size than the original uppercase letters.
Variable fonts—officially known as OpenType Font Variations—remove the explicit distinctions between different weights and styles, which have existed since the early days of typesetting. It's no exaggeration to say that this represents a huge leap forward in font technology in recent years.
TL;DR: not all fonts support tabular-nums.
This page here does a good job explaining that only 'Open Type' fonts can interact with the font-variant-* properties. https://practice.typekit.com/lesson/caring-about-opentype-features/
This article indicates that Google Fonts does not support this yet, but is looking at supporting open font properties: https://css-tricks.com/almanac/properties/f/font-variant-numeric/ (last updated May 9th, but the article is from 2017)
It seems that the core of the problem is that the font designers have not yet accounted for this use, so browsers can't leverage it.
171
According to this GitHub issue, Google Fonts only provides a subset of OpenType features to improve latency. The only solution for now is self hosting or using another font CDN.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
