1473327 - Font editor can't map system fonts properly to their CSS properties

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[Martin Balfanz [:mbalfanz]]

Attachment: rendered-font.jpg

The following scenario could be reproduced on OS X with the latest Nightly.  When inspecting elements that need the system font (system-ui, -apple-system) as fallback to render it's content, the rules view and the font editor seem unable to map fonts correctly.

STR:
1. Visit https://2018.ampersandconf.com/
2. Inspect `<span class="hero__location p-location">`
3. Open the fonts editor

Expected result:
- SourceSansVariable and system-ui should be underlined in the rules panel
- SourceSansVariable and some system font should be shown at the top of the fonts panel and in the "Rendered fonts" section

Actual result:
- Only SourceSansVariable is underlined in the rules panel
- Only SourceSansVariable is displayed at the top of the fonts panel, but both SourceSansVariable and .SF NS Display are shown in the "Rendered fonts" section

For the actual result, see top half of the attached screenshot.

Interesting is that, if all content except for the quote character ’ are removed, the font editor and rules panel show the correct result.  The mapping seems to work, but something get's confused when the system font is used as fallback. (see bottom half of the attached screenshot)

Comment 1

[Patrick Brosset <:pbro>]

> both SourceSansVariable and .SF NS Display are shown in the "Rendered fonts" section
For info, that section contains the result from the getUsedFontFaces API.

> Interesting is that, if all content except for the quote character ’ are removed, the font editor and rules panel show the correct result.
When you do that and when the font editor is refreshed, the code finds that none of the fonts in the font-family value appear to be used, so it falls back to showing the editor for the first font that was returned by getUsedFontFaces. So it appears to work in that sense, but really behind the scenes, the tool should be able to match system-ui (a font-family) to .SF NS Display, and that's not happening.
Currently, our code has no way of knowing that those correspond to each other.

getUsedFontFaces also gives us the name "System Font" for this font. Maybe we need to assume (at least on Mac, cause that use case works fine on Windows) that this is equivalent to the system-ui font-family?