Numbers do not uppercase with css (google fonts)

Question

I've got an issue with the Playfair Display on google fonts. Here, i've a countdown with the Playfair Display at the bottom of this page : http://pms-ops.com/revlon/2019/

The font numbers are different in lowercase and uppercase. Even if I put the css in uppercase, the number are still in lowercase.

I add some code that fixed my problem (mostly on desktop). But the mobile part is in lowercase. I tried many thing but I can't fix it.

text-transform:capitalize;
-moz-font-feature-settings:"lnum";
-webkit-font-feature-settings:"lnum";
font-feature-settings:"lnum";
font-variant-numeric:lining-nums;

This is doesn't work, only on desktop and it's not working with all browsers.

Answer 1

Appreciate this is old but figured somebody might want an answer here.

The style of numerals you're referring to are called Tabular Lined numerals.

Not all fonts have them, and as far as I can tell the Google Fonts version of Playfair doesn't include Opentype features. That said I can see them on the original Playfair Display Opentype font, and if you check out the 'Figures' section here; https://beautifulwebtype.com/playfair-display/ you'll see them.

As far as I can tell you need to embed the woff2 font files (https://github.com/clauseggers/Playfair-Display/tree/master/fonts/WOFF2) in order to use them in the CSS, together with the following styles;

font-family: 'Playfair Display SC'; font-feature-settings: 'lnum', 'pnum';

Best of luck.

Answer 2

Here the number in uppercase.

Here the number in lowercase.