/* * App font faces, served statically and linked from the document * (app/+html.tsx) so they are parsed before the first paint. Loading these * through expo-font instead injects the @font-face rules at the END of the * SSR body — the header paints in a fallback font and visibly swaps once the * rules parse. Web skips expo-font entirely (hooks/useAppFonts.web.ts); * native still loads the same files from node_modules at runtime. * * Family names must match the useFonts() keys in hooks/useAppFonts.ts — * they are what the Tamagui config resolves fontFamily tokens to. * * font-weight: 100 900 — each family is a single cut whose weight is baked * into the family name; the full range makes every requested weight an exact * match so browsers never apply synthetic (faux) bold. * * font-display: block — the text is briefly invisible instead of flashing a * fallback font. Safe here: the files are same-origin and preloaded from the * head, so the block window is just their own load time (and 0 when cached). * * The .woff2 files are subsets of the same cuts native loads from * node_modules — together ~300KB vs the 1.03MB unsubset ttf/otf originals, * all of which preload before first paint. The subset keeps every script the * originals actually carried that users can hit (latin, latin-ext, cyrillic, * greek, vietnamese, hebrew — full UI coverage plus non-Latin catalog * titles/names), so web rendering matches the originals; only glyph sets the * source fonts never had (CJK, emoji) fall back to system fonts, as before. * Regenerate with scripts/subset-fonts.sh (the literal unicode ranges and * source paths live there). */ @font-face { font-family: "Inter"; src: url("/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 100 900; font-display: block; } @font-face { font-family: "InterBold"; src: url("/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 100 900; font-display: block; } @font-face { font-family: "Fredoka_600SemiBold"; src: url("/fonts/Fredoka_600SemiBold.woff2") format("woff2"); font-weight: 100 900; font-display: block; } @font-face { font-family: "Fredoka_700Bold"; src: url("/fonts/Fredoka_700Bold.woff2") format("woff2"); font-weight: 100 900; font-display: block; } @font-face { font-family: "Rubik_400Regular"; src: url("/fonts/Rubik_400Regular.woff2") format("woff2"); font-weight: 100 900; font-display: block; } @font-face { font-family: "Rubik_600SemiBold"; src: url("/fonts/Rubik_600SemiBold.woff2") format("woff2"); font-weight: 100 900; font-display: block; }