0

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/

Real Noob
  • 1,369
  • 2
  • 15
  • 29

2 Answers2

1

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');
Peter Constable
  • 2,707
  • 10
  • 23
  • Thanks Peter. I didn't know about the Type Tester in Google fonts. I will try it with other fonts now. :) – Real Noob Feb 03 '23 at 09:18
  • Is it possible to download and install variable fonts locally? The project I am working on will always be on my local machine and I just prefer installing those fonts locally. – Real Noob Feb 03 '23 at 09:19
  • 1
    If you go to https://fonts.google.com/?vfonly=true and click into any of the variable fonts they have, then at the top right of the page click "Download family", you'll get download that contains the variable font as well as static (non-variable) fonts for the named instances. – Peter Constable Feb 03 '23 at 18:25
0

Providing a font-weight of 900, and a font-stretch of 50%:

https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50,900&display=swap