Question 45526 in CSS Question posted in
Some basic documentation can be found here.

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,[email protected],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/

Tags:

2

Answers


  2. 0

    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,[email protected],100..900&display=swap');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search