ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Host fonts locally and guard FOUC

Browse Source
This commit is contained in:
Codex
2026-03-07 23:37:31 +00:00
parent c1aebbb5e2
commit 856b752c0b
11 changed files with 153 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
hdyc-svelte/src/app.html
View File

@@ -1,12 +1,71 @@
<!doctype html>
<html lang="en" data-theme="dark" data-palette="classic">
<html lang="en" data-theme="dark" data-palette="classic" data-fonts="loading">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="preload"
href="/fonts/inter/Inter-Regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/inter/Inter-Medium.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/inter/Inter-SemiBold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/inter/Inter-Bold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/inter/Inter-ExtraBold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<script>
(function () {
const doc = document.documentElement;
if (!doc.dataset.fonts) {
doc.dataset.fonts = 'loading';
}
try {
const doc = document.documentElement;
const savedTheme = localStorage.getItem('theme');
const savedPalette = localStorage.getItem('palette');
const prefersDark =
@@ -19,6 +78,25 @@
} catch (error) {
// Ignore errors if storage or matchMedia is unavailable
}
const markFontsReady = () => {
if (doc.dataset.fonts !== 'ready') {
doc.dataset.fonts = 'ready';
}
};
const fallback = setTimeout(markFontsReady, 3000);
const resolveFonts = () => {
clearTimeout(fallback);
markFontsReady();
};
if (
document.fonts &&
document.fonts.ready &&
typeof document.fonts.ready.then === 'function'
) {
document.fonts.ready.then(resolveFonts, resolveFonts);
} else {
resolveFonts();
}
})();
</script>
%sveltekit.head%