From 6dea47c00eb058086696059501f1a05bfd020836 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 30 Apr 2026 13:15:21 +0000 Subject: [PATCH] fix(ui): use format("woff2") so variable fonts load on Safari iOS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- packages/ui/core/src/styles/base.css | 5 ++- packages/ui/core/src/styles/globals.css | 4 +- packages/ui/core/src/styles/web.css | 60 +++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 2 deletions(-) diff --git a/packages/ui/core/src/styles/base.css b/packages/ui/core/src/styles/base.css index 2f0f1ac1..71d0df11 100644 --- a/packages/ui/core/src/styles/base.css +++ b/packages/ui/core/src/styles/base.css @@ -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, diff --git a/packages/ui/core/src/styles/globals.css b/packages/ui/core/src/styles/globals.css index 1094aa2e..593628da 100644 --- a/packages/ui/core/src/styles/globals.css +++ b/packages/ui/core/src/styles/globals.css @@ -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, diff --git a/packages/ui/core/src/styles/web.css b/packages/ui/core/src/styles/web.css index 3f97ccb3..d9aa90f4 100644 --- a/packages/ui/core/src/styles/web.css +++ b/packages/ui/core/src/styles/web.css @@ -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"); +} + +@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"); +} + @theme inline { --font-montserrat: "Montserrat Variable", "Montserrat", "Helvetica Neue", Helvetica, Arial,