Fix variable font loading on Safari iOS by using woff2 format#22
Fix variable font loading on Safari iOS by using woff2 format#22cooper (czxtm) merged 1 commit intomainfrom
Conversation
Safari (notably iOS Safari) does not recognize the legacy
format("woff2-variations") keyword and silently skips the entire src,
leaving the font unloaded. WOFF2 inherently supports variations, so
format("woff2") is sufficient and is the modern recommendation.
Replace the broken keyword in our hand-written @font-face rules
(base.css, globals.css) and add overriding declarations in web.css for
the @fontsource-variable/{inter,montserrat,source-code-pro} fonts —
those packages emit the same broken format string, so re-declaring the
families with format("woff2") later in the cascade gives Safari iOS a
working source.
PR SummaryLow Risk Overview Adds Safari iOS-specific Reviewed by Cursor Bugbot for commit 6dea47c. Configure here. |
|
Preview |
|
Docs preview |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6dea47c00e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
| @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"); |
There was a problem hiding this comment.
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 👍 / 👎.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is ON, but it could not run because the branch was deleted or merged before autofix could start.
Reviewed by Cursor Bugbot for commit 6dea47c. Configure here.
| font-weight: 200 900; | ||
| src: url(@fontsource-variable/source-code-pro/files/source-code-pro-latin-wght-italic.woff2) | ||
| format("woff2"); | ||
| } |
There was a problem hiding this comment.
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.
Reviewed by Cursor Bugbot for commit 6dea47c. Configure here.
2 participants
Summary
This PR fixes variable font loading failures on Safari iOS by changing the font format declaration from the unsupported
woff2-variationsto the standardwoff2format. Safari iOS does not recognize thewoff2-variationsformat string and skips the entiresrcdeclaration, causing fonts to fail to load.Key Changes
Google Sans Code Variablefont format fromwoff2-variationstowoff2with explanatory commentGoogle Sans Code Variablefont format fromwoff2-variationstowoff2with reference to base.css documentation@font-faceoverrides for three variable fonts:Implementation Details
The solution leverages CSS cascade rules where later
@font-facedeclarations override earlier ones with the samefont-family,font-style, andfont-weightrange. By re-declaring the fonts with the standardwoff2format (which inherently supports variations), we override the broken declarations that use the unrecognizedwoff2-variationsformat. This ensures fonts load correctly on Safari iOS while maintaining compatibility with other browsers.All font declarations include
font-display: swapfor optimal loading behavior and proper unicode-range specifications where applicable.https://claude.ai/code/session_01FazMTBk3y6C9wYQYcAzYcS