cssgoogle-fonts

Font-variant-numeric for Google Fonts


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.


Solution

  • 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.