Noto Sans @font-face with unicode-range U+60 hides system-installed Noto Sans on Linux

[lingfish]

Problem

A @font-face rule in hx_browsers.scss that overrides the backtick glyph (U+60) for "Noto Sans" hides the system-installed Noto Sans for all characters on Chromium-based browsers on Linux.

This causes all text on github.com to render in Arial instead of Noto Sans for Linux users who have Noto Sans installed locally.

Root Cause

Per the CSS Fonts Module Level 4 spec:

"If the font family name is the same as a font family available in a given user's environment, it effectively hides the underlying font."

The @font-face in question (found in app/assets/stylesheets/bundles/global/hx_browsers.scss):

@font-face {
  font-family: "Noto Sans";
  src: local("sans-serif"), local("Arial"), local("Helvetica");
  font-display: swap;
  unicode-range: U+60;
}

This declaration claims the "Noto Sans" family name, which hides the system-installed Noto Sans. For characters outside unicode-range: U+60, there is no matching @font-face face, so the browser skips "Noto Sans" entirely and falls through to Arial.

Steps to Reproduce

1. On a Linux system with fonts-noto-core (or similar) installed (verify with fc-match "Noto Sans")
2. Open any github.com page in Chrome/Edge
3. Text renders in Arial instead of Noto Sans

Verified Behavior

Created a minimal test case with two separate documents (iframes) — one with the @font-face, one without:

• Panel A (with @font-face): Text renders in Arial (system Noto Sans hidden)
• Panel B (without @font-face): Text renders in Noto Sans (system font used)

Both panels use the identical font-family stack. The only difference is the presence of the @font-face rule.

Suggested Fix

Change the font-family name in the @font-face to something that doesn't shadow the system font:

@font-face {
  font-family: "Noto Sans Backtick Fix";
  src: local("sans-serif"), local("Arial"), local("Helvetica");
  font-display: swap;
  unicode-range: U+60;
}

Or remove the @font-face entirely — the original backtick glyph bug was in old versions of Noto Sans that most systems have since updated past.

References

• Original backtick issue: primer/css#2750
• Mona Sans VF font stack addition: primer/primitives#1332
• CSS spec behavior (Firefox bug 637157): @font-face family names should hide system fonts