Skip to main content
Participant
January 27, 2023
Question

Allow CSS font-weight to be used with variable fonts by putting the full range in @font-face

  • January 27, 2023
  • 1 reply
  • 1967 views

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:

@11220649-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:

@11220649-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`.

This topic has been closed for replies.

1 reply

Neelamk
Legend
January 30, 2023

Hi Robert,

 

Thank you for your time in sharing your valuable feedback. We will take this ahead to the out team to work on this and keep you posted once we hear from them. Also, I would recommend you share the feedback through https://adobefonts.uservoice.com/forums/940222-adobe-fonts-feature-requests-and-feedback

 

Regards,

Neelam

Participant
January 10, 2024

This seems like real basic support for variable fonts. Any movement on this?