Chrome's System-Font Bolding Bug and the Stacks We're Stuck With
Chrome has developed a nasty habit of breaking system fonts on macOS. A bug late last year made -apple-system fonts render too thin and tight at small sizes, and too heavy and loose at large ones. That got fixed, but Chrome 81 shipped with a fresh problem: system fonts simply refuse to render bold, particularly at sizes above 16px—which is to say, pretty much every heading on the web.
The bug, tracked in Chromium, was flagged by Chrome CSS Developer Advocate Adam Argyle (the maker of VisBug), but the Chromium team declined to treat it as a release blocker for version 81. Version 82 is being skipped entirely, with the team planning to jump straight to version 83 in mid-May. Argyle has offered assurances, in the GitHub issue, that the fix lands in 83. That leaves roughly a month of broken bold text for anyone using the widely adopted system font stack.
That stack is common for two good reasons: it makes a site look native to the operating system, and it saves the performance cost of downloading custom fonts. Neither benefit is worth four weeks of unbolded headings, though. Jon Henshaw documented the issue and cited a few temporary mitigation options already floating around.
Šime Vidas proposed substituting Helvetica in the interim:
body {
font-family: -apple-system, Helvetica;
}One open question is the current state of the system font stack itself. The syntax has drifted through -apple-system, BlinkMacSystemFont, then -system-ui, and finally the unprefixed system-ui—all of which seem to do similar things, with muddled guidance on which is canonical. The long-term plan, per CSS Fonts Level 4, is a family of ui-sans-serif, ui-serif, and ui-monospace. Clearer vendor guidance on what developers should actually put in their stacks would be welcome:
/* Just a guess... */
body {
font-family:
ui-sans-serif,
system-ui,
-system-ui,
-apple-system,
BlinkMacSystemFont,
Roboto, Helvetica, Arial,
sans-serif,
"Apple Color Emoji";
}Reproducing the bug is size-sensitive. Bolding at the default 16px font size appears to work; the problem manifests only at 20px and above:
For a more deliberate workaround, Bramus has suggested swapping in Inter, a geometric sans that was designed for UI use and loads as a webfont, sidestepping the broken native rendering path entirely. It is a pragmatic stopgap while the system font stack waits on Chrome's next release cycle.
