When using a variable Adobe font in a web project, when you use the CSS file they generate for you, the `@font-face` declarations look like this:
@Blissful_help0D4E-face {
font-family: "rotunda-variable";
src: url("https://use.typekit.net/af/...") format("woff2"), url("https://use.typekit.net/af/...") format("woff"), url("https://use.typekit.net/af/...") format("opentype");
font-display: auto;
font-style: italic;
font-weight: 400;
font-stretch: normal;
}
For a variable font, the fact that `font-weight` is specified as `400` instead of the full range `100 1000` means that you must use `font-variation-settings` to change the weight of the text, eg "`font-variation-settings: "wght" 700` to get bold text. This is inconvenient and doesn't work with non-variable fonts.
However, browsers support the `font-weight` attribute for variable fonts. All that it would take to activate this is to change `font-weight: 400` in the `@font-face` declaration to `font-weight: 100 1000` (or whatever the full range of font weights is); then you could have the variable font be bold with just `font-weight: bold`. Ideally, Adobe would serve the following CSS:
@Blissful_help0D4E-face {
font-family: "rotunda-variable";
src: url("https://use.typekit.net/af/...") format("woff2"), url("https://use.typekit.net/af/...") format("woff"), url("https://use.typekit.net/af/...") format("opentype");
font-display: auto;
font-style: italic;
font-weight: 100 1000; /* changed */
font-stretch: normal;
}
Then, even when using variable fonts, users could still write `font-weight: bold` in their CSS and not have to fiddle with the variable axes in `font-variation-settings`.
2
Replies
AdChoices