add 'Noto Sans Backtick Fix' alias to sans-serif font stacks by liuliu-dev · Pull Request #1412 · primer/primitives

liuliu-dev · 2026-07-29T19:05:01Z

Summary

Adds 'Noto Sans Backtick Fix' before 'Noto Sans' in fontStack.system, fontStack.sansSerif, and fontStack.sansSerifDisplay. This is step 1 of a two-step rollout with github/github-ui to fix body text falling through to Helvetica/Arial/Nimbus on Linux Firefox (primer/css#3107, github/primer#6890).

Root cause: github/github-ui's hx_browsers.scss declares an @font-face under the family name 'Noto Sans' that only covers U+60 (backtick) as a workaround for a Noto Sans backtick rendering bug (github/primer#1531). Per CSS Fonts L4 §5.1, declaring an @font-face under 'Noto Sans' shadows the system-installed Noto Sans for the whole page. Every non-backtick character then falls through the stack. On macOS/Windows this is invisible because -apple-system / 'Segoe UI' wins earlier. On Linux Firefox there is no earlier match, so body text lands on Helvetica/Arial/Nimbus.

The fix is to rename the @font-face in hx_browsers.scss to a non-shadowing name ('Noto Sans Backtick Fix') and reference that name in the stack before 'Noto Sans'. That preserves the backtick workaround while letting 'Noto Sans' resolve to the system font. This PR ships the stack change; github/github-ui will ship the @font-face rename in step 2.

What should reviewers focus on?

Rollout ordering. This PR must merge and release before github/github-ui renames the @font-face. If the github-ui rename ships first, users on old Noto Sans versions would see zero-width backticks regress (github/primer#1531). At runtime, this PR is a no-op until step 2 lands: browsers try 'Noto Sans Backtick Fix', find no matching face, and skip to 'Noto Sans' exactly as today.
Diff scope. The only value changes in the compiled outputs should be --fontStack-system, --fontStack-sansSerif, --fontStack-sansSerifDisplay (and their equivalents in each output format, plus composite typography tokens that interpolate them). Any other diff is unexpected — please flag.

Verification

To verify this PR resolves the underlying bug, I:

Deployed github/github-ui#28664, which renames the backtick-only @font-face in hx_browsers.scss from 'Noto Sans' to 'Noto Sans Backtick Fix'.
Installed this branch's @primer/primitives canary version, so --fontStack-sansSerif includes 'Noto Sans Backtick Fix' before 'Noto Sans'.
Simulated Linux font resolution by removing the macOS-specific entries (-apple-system, BlinkMacSystemFont) from the computed stack, forcing the browser past the platform fallbacks.

Before (current production page https://github.com/): the 'Noto Sans' @font-face shadows the system Noto Sans, so every non-backtick character skips it and lands on Helvetica.

After (this PR + github-ui#28664 — fix applied): the backtick face is now registered under 'Noto Sans Backtick Fix', so 'Noto Sans' in the stack resolves to the system font and body text renders in Noto Sans as intended.

Same page, same DOM, same computed font-family value — only the @font-face declaration and the stack alias differ.

Related issues:

Noto Sans @font-face with unicode-range U+60 hides system-installed Noto Sans on Linux css#3107 (pending step 2 in github/github-ui)
github/primer#6890 (pending step 2 in github/github-ui)
Background: github/primer#1531 (original backtick @font-face workaround)
Spec: CSS Fonts L4 §5.1 — the @font-face rule

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

changeset-bot · 2026-07-29T19:05:05Z

🦋 Changeset detected

Latest commit: 0212a55

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-07-29T19:07:40Z

Design Token Diff (CSS)

/css/functional/typography/typography.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/typography/typography.css	2026-07-29 19:06:17.062948071 +0000
@@ -1,8 +1,8 @@
:root {
 --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; /** Monospace font stack for code, technical content, and tabular data. */
-  --fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Sans-serif font stack for body text and general UI elements. */
-  --fontStack-sansSerifDisplay: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Display font stack for headings and titles. Same as sansSerif but semantically distinct. */
-  --fontStack-system: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available. */
+  --fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Backtick Fix", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Sans-serif font stack for body text and general UI elements. */
+  --fontStack-sansSerifDisplay: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Backtick Fix", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Display font stack for headings and titles. Same as sansSerif but semantically distinct. */
+  --fontStack-system: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Backtick Fix", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available. */
 --text-codeBlock-size: 0.8125rem;
 --text-codeInline-size: 0.9285em;
 --text-body-lineHeight-large: var(--base-text-lineHeight-normal);

github-actions · 2026-07-29T19:07:41Z

Design Token Diff (StyleLint)

/styleLint/functional/typography/typography.json

+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/typography/typography.json	2026-07-29 19:06:17.062948071 +0000
@@ -38,7 +38,7 @@
 },
 "fontStack-sansSerif": {
   "key": "{fontStack.sansSerif}",
-    "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "fontFamily",
   "$description": "Sans-serif font stack for body text and general UI elements.",
   "$extensions": {
@@ -54,7 +54,7 @@
   "filePath": "src/tokens/functional/typography/font-stack.json5",
   "isSource": true,
   "original": {
-      "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "fontFamily",
     "$description": "Sans-serif font stack for body text and general UI elements.",
     "$extensions": {
@@ -75,7 +75,7 @@
 },
 "fontStack-sansSerifDisplay": {
   "key": "{fontStack.sansSerifDisplay}",
-    "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "fontFamily",
   "$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
   "$extensions": {
@@ -91,7 +91,7 @@
   "filePath": "src/tokens/functional/typography/font-stack.json5",
   "isSource": true,
   "original": {
-      "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "fontFamily",
     "$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
     "$extensions": {
@@ -112,7 +112,7 @@
 },
 "fontStack-system": {
   "key": "{fontStack.system}",
-    "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "fontFamily",
   "$description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.",
   "$extensions": {
@@ -124,7 +124,7 @@
   "filePath": "src/tokens/functional/typography/font-stack.json5",
   "isSource": true,
   "original": {
-      "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "$value": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "fontFamily",
     "$description": "Mona Sans–first font stack with system fallbacks, optimized for cross-platform rendering. Primary font stack for all UI text where Mona Sans is available.",
     "$extensions": {
@@ -240,7 +240,7 @@
 },
 "text-body-shorthand-large": {
   "key": "{text.body.shorthand.large}",
-    "$value": "400 1rem,16px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 1rem,16px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "User-generated content, markdown rendering.",
   "$extensions": {
@@ -274,7 +274,7 @@
 },
 "text-body-shorthand-medium": {
   "key": "{text.body.shorthand.medium}",
-    "$value": "400 0.875rem,14px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 0.875rem,14px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Default UI font. Most commonly used for body text.",
   "$extensions": {
@@ -308,7 +308,7 @@
 },
 "text-body-shorthand-small": {
   "key": "{text.body.shorthand.small}",
-    "$value": "400 0.75rem,12px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 0.75rem,12px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.",
   "$extensions": {
@@ -483,7 +483,7 @@
 },
 "text-caption-shorthand": {
   "key": "{text.caption.shorthand}",
-    "$value": "400 0.75rem,12px/1.25 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 0.75rem,12px/1.25 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.",
   "$extensions": {
@@ -818,7 +818,7 @@
 },
 "text-display-shorthand": {
   "key": "{text.display.shorthand}",
-    "$value": "500 2.5rem,40px/1.375 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "500 2.5rem,40px/1.375 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
   "$extensions": {
@@ -939,7 +939,7 @@
 },
 "text-subtitle-shorthand": {
   "key": "{text.subtitle.shorthand}",
-    "$value": "400 1.25rem,20px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 1.25rem,20px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
   "$extensions": {
@@ -1126,7 +1126,7 @@
 },
 "text-title-shorthand-large": {
   "key": "{text.title.shorthand.large}",
-    "$value": "600 2rem,32px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "600 2rem,32px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
   "$extensions": {
@@ -1160,7 +1160,7 @@
 },
 "text-title-shorthand-medium": {
   "key": "{text.title.shorthand.medium}",
-    "$value": "600 1.25rem,20px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "600 1.25rem,20px/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
   "$extensions": {
@@ -1194,7 +1194,7 @@
 },
 "text-title-shorthand-small": {
   "key": "{text.title.shorthand.small}",
-    "$value": "600 1rem,16px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "600 1rem,16px/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Uses the same size as body (large) with a heavier weight of semibold (600).",
   "$extensions": {

github-actions · 2026-07-29T19:07:42Z

Design Token Diff (Fallbacks)

/fallbacks/functional/typography/typography.json

+++ /home/runner/work/primitives/primitives/dist/fallbacks/functional/typography/typography.json	2026-07-29 19:06:17.062948071 +0000
@@ -1,12 +1,12 @@
{
-  "--fontStack-system": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-  "--fontStack-sansSerif": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-  "--fontStack-sansSerifDisplay": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--fontStack-system": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--fontStack-sansSerif": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--fontStack-sansSerifDisplay": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 "--fontStack-monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
 "--text-display-size": "2.5rem",
 "--text-display-lineHeight": 1.375,
 "--text-display-weight": 500,
-  "--text-display-shorthand": "500 2.5rem/1.375 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-display-shorthand": "500 2.5rem/1.375 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 "--text-title-size-large": "2rem",
 "--text-title-size-medium": "1.25rem",
 "--text-title-size-small": "1rem",
@@ -16,13 +16,13 @@
 "--text-title-weight-large": 600,
 "--text-title-weight-medium": 600,
 "--text-title-weight-small": 600,
-  "--text-title-shorthand-large": "600 2rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-  "--text-title-shorthand-medium": "600 1.25rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-  "--text-title-shorthand-small": "600 1rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-title-shorthand-large": "600 2rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-title-shorthand-medium": "600 1.25rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-title-shorthand-small": "600 1rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 "--text-subtitle-size": "1.25rem",
 "--text-subtitle-lineHeight": 1.625,
 "--text-subtitle-weight": 400,
-  "--text-subtitle-shorthand": "400 1.25rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-subtitle-shorthand": "400 1.25rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 "--text-body-size-large": "1rem",
 "--text-body-size-medium": "0.875rem",
 "--text-body-size-small": "0.75rem",
@@ -30,13 +30,13 @@
 "--text-body-lineHeight-medium": 1.5,
 "--text-body-lineHeight-small": 1.625,
 "--text-body-weight": 400,
-  "--text-body-shorthand-large": "400 1rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-  "--text-body-shorthand-medium": "400 0.875rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-  "--text-body-shorthand-small": "400 0.75rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-body-shorthand-large": "400 1rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-body-shorthand-medium": "400 0.875rem/1.5 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-body-shorthand-small": "400 0.75rem/1.625 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 "--text-caption-size": "0.75rem",
 "--text-caption-lineHeight": 1.25,
 "--text-caption-weight": 400,
-  "--text-caption-shorthand": "400 0.75rem/1.25 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  "--text-caption-shorthand": "400 0.75rem/1.25 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Backtick Fix', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 "--text-codeBlock-size": "0.8125rem",
 "--text-codeBlock-lineHeight": 1.5,
 "--text-codeBlock-weight": 400,

Copilot

Pull request overview

This PR updates Primer Primitives typography tokens to support a two-step rollout that avoids @font-face shadowing of system-installed Noto Sans by introducing a new alias family name in the sans-serif stacks.

Changes:

Insert 'Noto Sans Backtick Fix' before 'Noto Sans' in fontStack.system.
Insert 'Noto Sans Backtick Fix' before 'Noto Sans' in fontStack.sansSerif and fontStack.sansSerifDisplay.
Add a Changeset to release the update as a minor version bump of @primer/primitives.

Show a summary per file

File	Description
src/tokens/functional/typography/font-stack.json5	Adds the non-shadowing alias font family ahead of `'Noto Sans'` in the three sans-serif stacks.
.changeset/noto-sans-backtick-fix-alias.md	Publishes the change as a minor release with a brief rationale and issue links.

Review details

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Files reviewed: 2/2 changed files
Comments generated: 0
Review effort level: Low

liuliu-dev added 2 commits July 29, 2026 11:54

Noto Sans Backtick Fix

710025b

changeset

0212a55

liuliu-dev deployed to github-pages July 29, 2026 19:07 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to Preview (Storybook) July 29, 2026 19:07 Inactive

liuliu-dev marked this pull request as ready for review July 29, 2026 19:35

liuliu-dev requested a review from a team as a code owner July 29, 2026 19:35

liuliu-dev requested review from Copilot and jonrohan July 29, 2026 19:35

Copilot started reviewing on behalf of liuliu-dev July 29, 2026 19:35 View session

Copilot AI reviewed Jul 29, 2026

View reviewed changes

joshblack approved these changes Jul 30, 2026

View reviewed changes

liuliu-dev merged commit 3b20045 into main Jul 30, 2026
30 checks passed

liuliu-dev deleted the liuliu/noto-sans-backtick-fix branch July 30, 2026 21:06

primer Bot mentioned this pull request Jul 30, 2026

Release Tracking #1403

Merged

Navigation Menu

Uh oh!

add 'Noto Sans Backtick Fix' alias to sans-serif font stacks - #1412

add 'Noto Sans Backtick Fix' alias to sans-serif font stacks#1412
liuliu-dev merged 2 commits into
mainfrom
liuliu/noto-sans-backtick-fix

liuliu-dev commented Jul 29, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 29, 2026

Uh oh!

github-actions Bot commented Jul 29, 2026

/css/functional/typography/typography.css

Uh oh!

github-actions Bot commented Jul 29, 2026

/styleLint/functional/typography/typography.json

Uh oh!

github-actions Bot commented Jul 29, 2026

/fallbacks/functional/typography/typography.json

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

liuliu-dev commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What should reviewers focus on?

Verification

Related issues:

Contributor checklist:

Uh oh!

changeset-bot Bot commented Jul 29, 2026

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 29, 2026

Design Token Diff (CSS)

/css/functional/typography/typography.css

Uh oh!

github-actions Bot commented Jul 29, 2026

Design Token Diff (StyleLint)

/styleLint/functional/typography/typography.json

Uh oh!

github-actions Bot commented Jul 29, 2026

Design Token Diff (Fallbacks)

/fallbacks/functional/typography/typography.json

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

liuliu-dev commented Jul 29, 2026 •

edited

Loading