[SOLVED] Variable Google Fonts not Applying Valid CSS Properties

Variable Google Fonts not Applying Valid CSS Properties

I am learning how to use variable Google fonts and wrote this HTML:

<h1>This heading should be condensed.</h1>

with the following CSS:

@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..200,100..700&display=swap');

h1 {
  font-family: 'Anybody';
  font-weight: 900;
  font-stretch: 50%;
}

The font 'Anybody' supports width axis (https://fonts.google.com/knowledge/using_type/styling_type_on_the_web_with_variable_fonts) so why isn't the text condensed?

A demo on JSFiddle: https://jsfiddle.net/yr4h8wg1/

Solution

In the @import URL, you specified a wdth range of 50..200. But it appears the Anybody font only supports a wdth range of 50..150 — see https://fonts.google.com/specimen/Anybody/tester. In your JSFiddle demo, change the "200" to "150" and it works.

@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..150,100..900&display=swap');