How can I use a specific style on a font with 47 styles?

November 8, 2023

I want to use SF Pro Expanded in the SF Pro font on the web. But I’m not sure how I would make it use the expanded style instead of just the normal SF Pro font (if that makes sense)

How would I do this in CSS?

@font-face {
  font-family: "SFPro-ExpandedLight";
  src: url(font/SF-Pro.ttf);
}

body {
  background-image: url("websitebg.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "SFPro-ExpandedLight", sans-serif;
}

This just uses the normal SF Pro font instead of Expanded

I tried changing the font weight to "expanded" but with no luck

>Solution :

You can use the font-variation-settings css property. Check out this codepen by Chris Coyier https://codepen.io/chriscoyier/pen/RwMQYyQ

specifically lines 57 to 63 which have this block

tr:nth-child(4) {
  @for $i from 1 through 10 {
    td:nth-child(#{$i + 1}) {
      font-variation-settings: "wght" #{(($i - 1) * 110) + 5}, "wdth" 130;
    }
  }
}

Converting to CSS I believe light expanded would be

font-variation-settings: "wght" 225, "wdth" 130;

You can read more in this article

It’s worth nothing that font-variation-settings has pretty abysmal support