/* * Self-hosted display typefaces. * * WHY THIS FILE IS PLAIN CSS AND NOT PART OF THE BUNDLE * * `@font-face` has to be in the document before first paint or the headings render in the * fallback and reflow when the real face arrives. Sufra's whole reason for prerendering is that * the first thing a reader sees is a link opened from a family group chat, so a visible reflow on * the masthead is exactly the wrong place to economise. A stylesheet linked from the prerendered * is parsed before the React bundle is even fetched. * * It is injected into every exported page by scripts/finalize-web.mjs and its arrival is asserted * by scripts/check-prerender.mjs -- the same belt-and-braces used for _headers, and for the same * reason: without the assertion the deploy still succeeds and the site still works, it is just * silently back to system fonts. * * LICENCE * * Fraunces and Amiri are both under the SIL Open Font License 1.1, which permits redistribution * including bundling with a web page. The licence text ships alongside the fonts, as the OFL * requires: public/fonts/OFL-Fraunces.txt and public/fonts/OFL-Amiri.txt. * * WHY unicode-range MATTERS HERE * * Amiri's Arabic subset is 106 KB -- larger than everything else on this page put together. The * unicode-range below means a browser only fetches it if the page actually paints an Arabic * character, so an English reader downloads Fraunces (66 KB) and nothing else, and an Arabic * reader gets a real Naskh face instead of whatever their OS defaults to. Removing the range * would not change how anything looks; it would just make every English visit 106 KB heavier. */ /* Fraunces: one variable file covers 400-700, so the weights below cost no extra requests. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; 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; } /* Amiri: classical Naskh, for Arabic headings. Reached by font-family fallback, not by a rule. */ @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/amiri-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* * Amiri's Arabic is drawn on a small x-height relative to its em, so at the same nominal size it * looks noticeably smaller than the Latin beside it. This is a property of the typeface, not a * layout bug, and the fix belongs here rather than in a component -- a screen should not have to * know which typeface a string resolved to. */ :lang(ar) { font-size-adjust: 0.52; }