1833176 - @font-face with local() src doesn't render bold fonts

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[herrernst]

Attachment: local-font-auto-ribbi.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0

Steps to reproduce:

Define a @font-face with local font. E.g.

@font-face {
  font-family: localArial;
  src: local(Arial);
}

Use that font-family where it should be bold, e. g. <strong> or with font-weight: bold

Actual results:

Font is bold

Expected results:

Font is not bold; same problem with italic

Works on other browsers (Chromium based) on Windows/Mac and also on Safari/Mac (see attached Screenshots)

Also note that font-synthesis: none is set, because I don't want fake bold/italic

One might one why we'd like to re-define a local font: It's because of size-adjusted font fallback as recommended at https://web.dev/css-size-adjust/#mitigating-cls-with-seamless-font-swapping

Comment 1

[herrernst]

Attachment: font-face-local-bold-win.PNG

Comment 2

[herrernst]

Attachment: font-face-local-bold-macos.png

Comment 3

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[Jonathan Kew [:jfkthame]]

This is a misunderstanding of how @font-face works, according to the CSS specification.

The @font-face rule defines a single face of a user-defined font-family, so given a single rule:

@font-face {
  font-family: localArial;
  src: local(Arial);
}

what you have is a family "localArial" that contains just a single face; it does not "magically" get the associated bold or italic faces. To define a complete "localArial" family, include rules for each of the faces:

@font-face {
  font-family: localArial;
  font-weight: bold;
  src: local(Arial Bold);
}

etc. (Check the exact PostScript or Full font names for each desired face.)

See for example https://drafts.csswg.org/css-fonts-4/#local-font-fallback:

the unique name used with local() specifies a single font, not an entire font family

The WebKit/Chromium behavior here is a violation of the CSS Fonts specification. (I think there are issues on file about it in their bug trackers.)

Comment 5

[herrernst]

Thanks for the clarification, sorry for my misunderstanding.
One additional question: What would you expect when local() is used with a pre-installed variable font like "SF Pro" or "Segoe UI Variable"? It seems "magical" weight/width works in Firefox, which I like ;-)

Comment 6

[Jonathan Kew [:jfkthame]]

Yes, I think that's correct -- if the @font-face rule does not specify a font-weight or -width descriptor, and if the resource (whether a local font or a downloadable resource) is a variable font that provides a range of weights and/or widths, then the full range should be available. This is the auto behavior of the style descriptors.