/* ============================================================================= Fonts ============================================================================= Outfit and DM Mono, served from this site rather than from Google. This started as a privacy improvement and turned into a correctness fix. The stylesheet used to come from fonts.googleapis.com, and a render-blocking stylesheet from a third party can hold a page in the "loading" state for as long as the request takes. While a document is still loading its animation timeline has not started, so every entrance animation sits frozen on its first frame. The first frame of a fade-in is opacity zero, so on any network that cannot reach Google the whole page below the header was invisible, and stayed invisible, with no error anywhere. Serving the files from here removes the third-party request, the DNS lookup, the extra connection and that entire failure mode. It also takes a disclosure off the privacy and cookie policies, because no visitor IP address reaches Google any more. Outfit is a variable font: one file covers every weight from 100 to 900, which is why there are two Outfit files and not ten. DM Mono ships static, so 400 and 500 are separate. Latin and Latin Extended only. The unicode-range on each face means a browser downloads the extended set only if the page actually uses a character from it, which for this site is almost never. To refresh them, fetch the stylesheet Google serves to a current browser and download the woff2 files it points at: curl -A "" \ "https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&family=DM+Mono:wght@400;500&display=swap" ========================================================================== */ /* Outfit, variable, 100 to 900 ------------------------------------------- */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/outfit-variable-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: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/outfit-variable-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; } /* DM Mono, 400 and 500 ---------------------------------------------------- */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-mono-400-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: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-mono-400-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: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-mono-500-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: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-mono-500-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; } /* ----------------------------------------------------------------------------- Metric-matched fallbacks ----------------------------------------------------------------------------- These exist so the font swap does not move anything. Measured advance width for the same 80-character string at 100px: Outfit 400 5702.0 Arial / Helvetica / Liberation 5715.9 (+0.24%) whatever ui-sans-serif resolves 6499.0 (+14.0%) Arial is within a quarter of a percent of Outfit. The generic keywords are fourteen percent wider, and they sit ahead of Arial in the stack, so they are what the browser actually uses while the real font loads. That 14% is an entire extra line on a phone headline: the home page grew 389px and /legal/terms grew 935px during the swap. Naming Arial explicitly and overriding the vertical metrics makes the swap invisible, which is what lets the two font preloads go away. They were pulling 47 KB at the highest priority ahead of the stylesheet that actually gates first paint. -------------------------------------------------------------------------- */ @font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'); size-adjust: 99.76%; ascent-override: 100%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: 'DM Mono Fallback'; src: local('Menlo'), local('Consolas'), local('DejaVu Sans Mono'), local('Liberation Mono'); size-adjust: 99.7%; ascent-override: 99%; descent-override: 26%; line-gap-override: 0%; }