• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Jan 27, 2023 Jan 27, 2023

Copy link to clipboard

Copied

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:

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

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

TOPICS
Font rendering , Missing feature , Product issue

Views

892

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 30, 2023 Jan 30, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 09, 2024 Jan 09, 2024

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines