A variable sans-serif font
The variable version has adjustable weight.
Weight available from 100
to 900
.
Check for font-variation-settings support.
h1 {
font-family: 'sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
// Set font weight as bold.
font-weight: 700;
}
// Make slightly bolder than bold.
@supports( font-variation-settings: wght ) {
h1 {
font-variation-settings: 'wght' 735;
}
}
The static versions are as follows.
Two styles are available for each of the static weights.
normal, italic
Nine weights available for each of the static styles.
Thin, Extra-Light, Light, Regular, Medium, Semi-bold, Bold, Extra-bold, Black
100, 200, 300, 400, 500, 600, 700, 800, 900