diff options
Diffstat (limited to 'landing/layouts/_default')
| -rw-r--r-- | landing/layouts/_default/baseof.html | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/landing/layouts/_default/baseof.html b/landing/layouts/_default/baseof.html index bab1b56..7cd776f 100644 --- a/landing/layouts/_default/baseof.html +++ b/landing/layouts/_default/baseof.html @@ -15,13 +15,37 @@ <meta name="twitter:title" content="{{ .Site.Title }}" /> <meta name="twitter:description" content="{{ .Site.Params.description }}" /> - <link rel="preconnect" href="https://fonts.googleapis.com"> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> + {{/* Preload the three self-hosted webfonts so the browser fetches + them in parallel with the CSS, not after it. */}} + <link rel="preload" href="{{ "fonts/fraunces-latin.woff2" | relURL }}" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="{{ "fonts/inter-latin.woff2" | relURL }}" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="{{ "fonts/jetbrains-mono-latin.woff2" | relURL }}" as="font" type="font/woff2" crossorigin> <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" /> <link rel="icon" type="image/svg+xml" href="{{ "favicon.svg" | relURL }}" /> <link rel="alternate" type="text/plain" title="LLM-readable site description" href="{{ "llms.txt" | relURL }}" /> + + {{/* Prevent FOUT: hide the body until webfonts are loaded, with a + 1500ms safety timeout so the page never stays blank forever. */}} + <style>html.fonts-pending body { visibility: hidden; }</style> + <script> + (function () { + var d = document; + d.documentElement.classList.add('fonts-pending'); + var done = false; + function reveal() { + if (done) return; + done = true; + d.documentElement.classList.remove('fonts-pending'); + } + if (d.fonts && d.fonts.ready && typeof d.fonts.ready.then === 'function') { + d.fonts.ready.then(reveal); + } else { + reveal(); + } + setTimeout(reveal, 1500); + })(); + </script> </head> <body> {{ partial "header.html" . }} |