/*
|--------------------------------------------------------------------------
| Shape of Headline — self-hosted fonts
|--------------------------------------------------------------------------
| These two files replace the request to fonts.googleapis.com that used to
| sit in header.php.
|
| Why: that was a third-party lookup on every single page load, and from
| India it was intermittently slow — occasionally slow enough that the page
| appeared to hang. Nothing about a reading platform for children should
| depend on a Google server answering promptly.
|
| Both are VARIABLE fonts: one file per family covers every weight from 100
| to 900, rather than a separate file per weight. Two requests, 74 KB in
| total, from the same server as everything else.
|
| Fraunces has its optical size pinned at 48 and WONK on — the setting the
| headline type was designed around. Only weight still varies.
|
| No italic file is loaded, which matches what the site did before: the
| Google Fonts URL requested the roman axis only, so the browser has always
| synthesised the slant in <em>. Loading a real italic now would change how
| every existing headline looks.
|
| The subset covers Latin-1 plus the punctuation this site uses: curly
| quotes, em and en dashes, the middle dot, the rupee sign, arrows.
| Characters absent from the original fonts are still absent here — Hanken
| Grotesk has never contained the rupee sign, so a Rs symbol in body text
| falls back to a system font exactly as it does today.
*/

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-var.woff2") format("woff2-variations"),
        url("../fonts/fraunces-var.woff2") format("woff2");
    font-weight: 100 900; /* the whole variable range, in one file */
    font-style: normal;
    font-display: swap; /* show fallback text at once; swap when ready */
}

@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-var.woff2") format("woff2-variations"),
        url("../fonts/hanken-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}