1755816 - Rendering the same local font differs depending on how it's set in CSS

Status: RESOLVED WORKSFORME

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

Description

[Piotr Chrobak]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Steps to reproduce:

Full description and test case at https://fira-code-rendering-issue.glitch.me

Actual results:

Rendering the same local font differs depending on how it's set in CSS:

font-family: 'Fira Code'

vs

@font-face {
  font-family: 'Fira Code Local';
  font-style: normal;
  font-weight: 400;
  src:
    local('Fira Code Regular');
}

font-family: 'Fira Code Local'

But I think it is a more complex problem, so please follow the link above.

Expected results:

I think both of the above font uses should render the same local font but it looks like it's not?

Comment 1

[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 revert this change in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

If you add the text-rendering: optimizeLegibility property in the CSS, does that fix the issue?

If you set browser.display.auto_quality_min_font_size in about:config to a smaller value (try zero), does that fix the issue?

Comment 3

[Piotr Chrobak]

(In reply to Jonathan Kew (:jfkthame) from comment #2)

If you add the text-rendering: optimizeLegibility property in the CSS, does that fix the issue?

Yes it does. I added the ability to test it out in the Test case.

If you set browser.display.auto_quality_min_font_size in about:config to a smaller value (try zero), does that fix the issue?

Yes it does fix the issue.

Now that knowing how to work around the problem, it remains a mystery why the problem occurs depending on how the local font is being used in CSS.
Does this mean that @font-face forces optimizeLegibility?

Comment 4

[Jonathan Kew [:jfkthame]]

Not exactly, but in effect yes. One of the things that the text-rendering property controls is whether Gecko gets "true" bounding boxes for each glyph. In auto (the default) mode, this depends on the font size; but for webfonts, the code here ensures that true bounding boxes are always respected even in optimizeSpeed mode, or auto mode at small sizes.

So in short, this is an expected result of the speed-optimized code path used for small sizes of installed fonts. Ideally, we'd use the optimizeLegibility behavior in all cases, for all fonts .... but that comes at a cost. So currently there's this trade-off.

Comment 5

[Jonathan Kew [:jfkthame]]

Closing this as WFM, as it sounds like the rendering is working as designed, as per comment 4: with installed fonts at small sizes (as controlled by the auto_quality_min_font_size pref), Firefox uses a faster but less-precise code path. This can be adjusted through CSS and/or local pref settings.

Comment 6

[Piotr Chrobak]

Decision path seems reasonable. Thanks for the clarification.