/* Self-hosted webfonts — see docs/DECISIONS.md "Fonts are self-hosted".
Replaces the fonts.googleapis.com that used to sit in index.html.
Both families are VARIABLE fonts, so one file covers a whole weight range and
`font-weight` below is a range, not a value. That is why four files replace the
eighteen @font-face rules Google's stylesheet emitted.
FRAUNCES CARRIES ITS OPTICAL-SIZE (`opsz`) AXIS, and re-fetching it with that axis
is the correction of a real regression — see docs/DECISIONS.md. The axis was dropped
on 2026-07-27 to save weight, on the recorded premise that "at the 13-26 px this app
uses, the difference is not visible". That premise was simply wrong about this app:
`.about-hero h1` is 52 px, `.hero h1` is 46 px, and Fraunces appears at 40, 34, 32
and 30 px besides. Fraunces has one of the most aggressive opsz axes of any Google
font — the low end is soft and thick, the high end is high-contrast with fine
hairlines — so without the axis every heading rendered the small-text design blown
up, which is exactly what "the serif is gone" looks like.
NOTHING NEEDS TO OPT IN. `font-optical-sizing:auto` is the CSS initial value, so a
browser sets `opsz` from the used font-size on its own. Do NOT add
`font-variation-settings` to a Fraunces rule to "make sure" — that property
OVERRIDES font-optical-sizing and would silently pin the axis again, reintroducing
this same bug in a form that looks like a fix.
THE ITALIC FILES ARE GONE, which is what paid for the axis. Nothing renders italic
Fraunces: both `font-style:italic` rules in css/app.css (`.about-empty`,
`.food-card .fscientific`) inherit `--font-body`, and profile taglines were retired
from the interface. So the two italic faces were 44 KB of precache for a style that
never appeared, and re-fetching them WITH opsz would have cost 80 KB. Roman-only
with the axis is 12 KB more than the axis-less pair of both — the offline budget is
effectively unchanged. If editorial content ever needs true italic, re-fetch from
the same Google CSS query (`1,9..144,400`) and add the rules back; until then an
`` inside a display-font element gets a synthesized oblique.
`font-display:swap` keeps text readable immediately in the fallback stack, which
matters most on the very first load before the service worker has cached anything.
unicode-range splits latin from latin-ext so a page that never shows a diacritic
never downloads the second file. latin-ext is what carries Romanian (ă â î ș ț)
and Hungarian (ő ű), so it is not optional for this app's locales. */
/* ---- Nunito (body) — weights 400..800 ---- */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/nunito-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;
}
/* ---- Fraunces (display) — weights 400..600 ---- */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(../fonts/fraunces-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(../fonts/fraunces-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;
}
/* ---- THE SHARE-CARD TYPEFACE POOL (ROADMAP 5.4.7 step 4, 2026-08-17) ------
Twelve families, fetched once from Google Fonts and BUNDLED. Nothing at runtime touches
fonts.googleapis.com: tests/legal.test.js fails the build on an external font host, and
the promise the app makes is typography that does not depend on a network.
THEY ARE IN THIS FILE AND NOT IN sw.js CORE, and the distinction is the whole delivery
strategy. What is precached here is the CSS — a few kilobytes of @font-face rules. A
browser downloads a webfont only when something actually RENDERS in it, so all 24 files
below cost nothing until somebody picks one on the share-card screen, and
`document.fonts.load()` in app/app/profile.js is what asks for it at that moment.
Putting them in a separate stylesheet would have created a second place for the
external-host guard to have to look, and it would have been forgotten.
THE APP CHROME IS NOT AFFECTED. Fraunces and Nunito above stay precached and stay the
only fonts a cold offline boot needs. Step 5 changes that for one of them and carries
its own answer (the sw.js `kiri-prefetch` message) — see docs/HANDOFF.md.
LATIN-EXT IS MANDATORY AND WAS CHECKED PER FAMILY. It carries Romanian (ă â î ș ț) and
Hungarian (ő ű), two published locales, so a family without it would render a Romanian
bird name half in a fallback face on the one image that leaves the app. All twelve have
it; the fetch script refuses to be quiet about one that does not. Cyrillic and Greek are
NOT covered, which is the same coverage Fraunces has always had — a Cyrillic bird name
falls back today and goes on falling back.
ROMAN ONLY, NO ITALIC FILES, which is the same trade this file already documents for
Fraunces: five of the twelve have no true italic at all, the card italic is a decorative
toggle rather than editorial emphasis, and true italic faces would have doubled 24 files
to 48. The canvas synthesizes an oblique.
Each family is a VARIABLE font where one exists, so one file covers its whole weight
range and the weight control needs no extra download. Archivo Black and Bebas Neue have
one weight by design — app/app/profile.js clamps to each family declared range and the
editor says so rather than offering a control that does nothing.
EVERY FAMILY HERE IS OFL 1.1 AND MUST BE CREDITED. app/data/legal.js names each
copyright holder and fonts/OFL.txt carries the notices; tests/legal.test.js checks both.
Adding a thirteenth family means adding it in three places, not one. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(../fonts/oswald-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(../fonts/oswald-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/lora-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/lora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/bitter-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/bitter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url(../fonts/josefin-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url(../fonts/josefin-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/grotesk-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivoblack-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivoblack-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/caveat-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/caveat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/quicksand-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/quicksand-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/merriweather-latin.woff2) 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, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/merriweather-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}