From the course: CSS: Variable Fonts

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Use the font-variation-settings property

Use the font-variation-settings property - CSS Tutorial

From the course: CSS: Variable Fonts

Start my 1-month free trial

Use the font-variation-settings property

“

- [Narrator] You can use existing standalone properties like font weight, font stretch, etc. to customize some registered variation axis, but you're likely to run into inconsistent behavior if you do so, let me show you what I mean. In my example, I've set the font weight, and font stretch properties in the heading, and it looks the way I wanted to in Firefox. But look what happens when I open the same document in Chrome, the heading font appears thicker and weightier somehow, but it's not because of the font weight. Can see the font ways that weight is applied same way, and if I changed the value here, you see, it gets thicker or thinner, but it still has this weightier appearance to it, so something else is happening. What's happening here is, while Firefox is automatically adjusting the optical sizing of the font, Chrome is not. Now, this is likely because variable fonts are still new and considered experimental, so the…

Contents