Skip to content

Fix variable font loading on Safari iOS by using woff2 format #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cooper (czxtm) merged 1 commit into from
Apr 30, 2026
+67 −2
Merged

Fix variable font loading on Safari iOS by using woff2 format #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/ui/core/src/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@
@custom-variant auto (&:where(.auto, .auto *));

/* google-sans-code-latin-wght-normal */
/* Use format("woff2") rather than the legacy format("woff2-variations") — Safari
(and iOS Safari in particular) does not recognize "woff2-variations" and skips
the entire src, leaving the font unloaded. WOFF2 inherently supports variations. */
@font-face {
font-family: "Google Sans Code Variable";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url(@fontsource-variable/google-sans-code/files/google-sans-code-latin-wght-normal.woff2)
format("woff2-variations");
format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/core/src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
@custom-variant dark (&:is(.dark *));

/* google-sans-code-latin-wght-normal */
/* See base.css for why this uses format("woff2") instead of the legacy
"woff2-variations" — Safari iOS skips unrecognized format strings entirely. */
@font-face {
font-family: "Google Sans Code Variable";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url(@fontsource-variable/google-sans-code/files/google-sans-code-latin-wght-normal.woff2)
format("woff2-variations");
format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
Expand Down
60 changes: 60 additions & 0 deletions packages/ui/core/src/styles/web.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,65 @@
@import "./base.css";

/* Safari iOS-compatible overrides for Fontsource variable fonts.
The @fontsource-variable/* packages imported in apps/web emit
src: ... format("woff2-variations"), which Safari iOS does not recognize.
Safari skips the unknown-format src and the font fails to load. Re-declaring
the same family/style/weight with format("woff2") overrides the broken rule
(later @font-face wins) and restores fonts on Safari iOS. */
@font-face {
font-family: "Inter Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
format("woff2");
Comment on lines +9 to +15
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Add unicode-range to latin-only override faces

These new @font-face overrides point to *-latin-* font files but omit unicode-range, which defaults to U+0-10FFFF. Because they reuse the same family/style/weight as the Fontsource definitions, this broad match can capture non-Latin text as well, causing Cyrillic/Greek/Vietnamese glyphs to fall back to other fonts instead of using the intended variable face. Limit these overrides to the Latin range (or add corresponding subset faces) so the Safari fix doesn’t regress international text rendering.

Useful? React with 👍 / 👎.

}

@font-face {
font-family: "Inter Variable";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url(@fontsource-variable/inter/files/inter-latin-wght-italic.woff2)
format("woff2");
}

@font-face {
font-family: "Montserrat Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(@fontsource-variable/montserrat/files/montserrat-latin-wght-normal.woff2)
format("woff2");
}

@font-face {
font-family: "Montserrat Variable";
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url(@fontsource-variable/montserrat/files/montserrat-latin-wght-italic.woff2)
format("woff2");
}

@font-face {
font-family: "Source Code Pro Variable";
font-style: normal;
font-display: swap;
font-weight: 200 900;
src: url(@fontsource-variable/source-code-pro/files/source-code-pro-latin-wght-normal.woff2)
format("woff2");
}

@font-face {
font-family: "Source Code Pro Variable";
font-style: italic;
font-display: swap;
font-weight: 200 900;
src: url(@fontsource-variable/source-code-pro/files/source-code-pro-latin-wght-italic.woff2)
format("woff2");
}
Copy link
Copy Markdown

@cursor cursor Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing unicode-range in Latin-only font override declarations

Medium Severity

All six new @font-face declarations reference Latin-only subset font files (e.g., inter-latin-wght-normal.woff2) but omit the unicode-range descriptor, defaulting to the full Unicode range. This is inconsistent with base.css, which correctly specifies unicode-range for its Latin-only Google Sans Code file. On non-Safari browsers where both the fontsource rules (with unicode-range subsets for cyrillic, greek, etc.) and these new rules coexist, the full-range override can take precedence over fontsource's non-Latin subset rules, causing non-Latin characters to fail to render with the correct font and fall back to system fonts instead.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 6dea47c. Configure here.


@theme inline {
--font-montserrat:
"Montserrat Variable", "Montserrat", "Helvetica Neue", Helvetica, Arial,
Expand Down
Loading