web: the head preloads the plex mono faces a first screen draws and they block, so a page never paints in a fallback mono
Signed-off-by: dawn <dawn@tangled.org>
11 unmodified lines1213141516171818192021222324252627282930313233343536373839404124 unmodified lines11 unmodified lines <meta name="author" content="Tangled" /> <link rel="icon" href="/logos/dolly.ico" sizes="48x48" /> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" /> <link rel="apple-touch-icon" href="/logos/dolly.png" /> <!-- the faces a page's first screen draws, so it paints in them and not in a fallback --> <link rel="preload" href="/fonts/TimelessSansVF.woff2" href="/fonts/IBMPlexMono-Regular.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/IBMPlexMono-Medium.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/IBMPlexMono-Bold.woff2" as="font" type="font/woff2" crossorigin /> <script> // a copy of applyTheme from lib/theme.ts since this runs before the app loads, keep them in sync (() => { const theme = /(?:^|;\s*)theme=([^;]*)/.exec(document.cookie)?.[1];24 unmodified lines123456567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727891077111213141516171885192021222324252693272829303132333410135363738394041421094344/* self-hosted fonts, served from /fonts (nix/pkgs/web-static-files.nix). shared with the docs site, which imports this file directly */
/* block, not swap: the head preloads the faces a first screen draws, so a page paints once they're in instead of painting a fallback mono and swapping */@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSansVF.woff2") format("woff2-variations"); font-weight: 300 800; font-style: normal; font-display: swap;}
@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSans-GroteskLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap;}
@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSans-GroteskRegularItalic.woff2") format("woff2"); font-weight: 420; font-style: italic; font-display: swap;}
@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSans-GroteskMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap;}
@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSans-GroteskSemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap;}
@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSans-GroteskBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap;}
@font-face { font-family: "TimelessSans"; src: url("/fonts/TimelessSans-GroteskBlackItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap;}
/* local Arial (or its metric clones on linux) scaled to TimelessSans' width and vertical metrics, so the swap from fallback to webfont doesn't shift layout. values measured against Timeless 1.094 at wght 420 */@font-face { font-family: "TimelessSans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 102.91%; ascent-override: 93.55%; descent-override: 24.14%; line-gap-override: 0%;}
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; font-display: block;}
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; font-display: block;}
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; font-display: block;}
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; font-display: block;}
@font-face { font-family: "IBMPlexMono"; src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; font-display: block;}