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.

Style variable fonts using old properties

Style variable fonts using old properties - CSS Tutorial

From the course: CSS: Variable Fonts

Start my 1-month free trial

Style variable fonts using old properties

“

- [Narrator] Some of the registered variation axes can be controlled using stand-alone CSS properties, in particular, weight and width. Let's look at how that works. If I inspect the title here, I can use the weight slider in the font editor, to change the weight of this font. And what you see is, as I'm changing the weight, a new element style is created, with the font-weight property set to whatever value I'm defining down here. So as I change the value, the font-weight value is changing. So we're not using font variation settings, we're just using the classic font-weight property, which can be really useful if you're going to also serve up a fallback font, which we'll talk about later. Because if we serve up a fallback font, the fallback font will understand this value, and map it to whatever is the closest available value for the static font. However, using these existing stand-alone properties only works if things are…

Contents