1945796 - Local macOS fonts not correctly loaded

Status: RESOLVED INVALID

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

Description

[FX]

Attachment: Display showing lack of style

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

Steps to reproduce:

Use CSS styling that loads a local font with multiple weights (both roman and italic). The reproducer is located at https://www.coudert.name/tmp/test.html

Actual results:

The page includes text both in regular and bold weights, and roman and italics. With Firefox, the bold and italics are not shown, all text is in normal weight.

When I use a private browsing window, the local font is apparently not loaded and the web font (second in order) is loaded, and the results are as expected.

Chrome and Safari correctly load the fonts and manage to display all variants.

Expected results:

Firefox should be able to load the font and locate their variants as well.

Comment 1

[FX]

Attachment: Display with correct style

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

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 3

[Jonathan Kew [:jfkthame]]

This is a misunderstanding of how src: local(...) works in @font-face rules. The test page mentioned includes this CSS:

@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 400;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Satoshi';
    font-style: italic;
    font-weight: 400;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Italic.woff') format('woff');
}
@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 700;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Satoshi';
    font-style: italic;
    font-weight: 700;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-BoldItalic.woff') format('woff');
}

which is clearly intended to define four faces (regular/italic/bold/bold-italic) of the "Satoshi" family. However, observe that each one of the four rules, each defining a single face of the family, has the exact same src: local('Satoshi') source defined. This means that the exact same local font face will be loaded for all four of the defined styles of "Satoshi".

The key fact here is that src: local(...) loads a specific font face, not a family. The CSS Fonts spec tries to make this clear:

The locally-installed <family-name> argument to local() is a format-specific string that uniquely identifies a single font face within a larger family ... For OpenType and TrueType fonts, this string is used to match only the Postscript name or the full font name in the name table of locally available fonts.

So if you have the Satoshi fonts installed locally, all four "styles" defined by these @font-face rules load the same face, which is the one whose Postscript and/or Full font name is simply "Satoshi".

To load the correct bold, italic, and bold-italic faces, those rules should use names like local('Satoshi-Bold'), local('Satoshi-Italic'), etc. to identify the exact faces to be used. (I don't have the Satoshi font on hand to check the precise form of the names, but they'll probably be something like this.)

Some browsers incorrectly treat the name in src: local(...) as a family name and then load various faces of that family. This is a violation of the CSS Fonts specification.