1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import type { FontAtlas } from "@/fonts/types";
import { SYSTEM_FONTS } from "@/fonts/system-fonts";
const GOOGLE_FONTS_CSS = "https://fonts.googleapis.com/css2";
const FONT_ATLAS_PATH = "/fonts/font-atlas.json";
const FONT_CHUNK_PATH_PREFIX = "/fonts/font-chunk-";
const fullLoaded = new Set<string>();
let cachedAtlas: FontAtlas | null = null;
let atlasFetchPromise: Promise<FontAtlas | null> | null = null;
function encodeGoogleFontsFamily(family: string): string {
return family.replace(/ /g, "+");
}
export function getCachedFontAtlas(): FontAtlas | null {
return cachedAtlas;
}
export function clearFontAtlasCache(): void {
cachedAtlas = null;
atlasFetchPromise = null;
fullLoaded.clear();
}
export function loadFontAtlas(): Promise<FontAtlas | null> {
if (cachedAtlas) return Promise.resolve(cachedAtlas);
if (atlasFetchPromise) return atlasFetchPromise;
atlasFetchPromise = fetch(FONT_ATLAS_PATH)
.then(async (response) => {
if (!response.ok) return null;
const data: FontAtlas = await response.json();
cachedAtlas = data;
preloadChunkImages({ atlas: data });
return data;
})
.catch(() => null);
return atlasFetchPromise;
}
function preloadChunkImages({ atlas }: { atlas: FontAtlas }): void {
const maxChunk = Math.max(
...Object.values(atlas.fonts).map((entry) => entry.ch),
);
for (let i = 0; i <= maxChunk; i++) {
// hint browser to preload chunk images without blocking
const img = new Image();
img.src = `${FONT_CHUNK_PATH_PREFIX}${i}.avif`;
}
}
export async function loadFullFont({
family,
weights = [400, 700],
}: {
family: string;
weights?: number[];
}): Promise<void> {
if (fullLoaded.has(family)) return;
const url = `${GOOGLE_FONTS_CSS}?family=${encodeGoogleFontsFamily(family)}:wght@${weights.join(";")}&display=swap`;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
document.head.appendChild(link);
await new Promise<void>((resolve) => {
link.addEventListener("load", () => resolve(), { once: true });
link.addEventListener("error", () => resolve(), { once: true });
});
await Promise.all(
weights.map((weight) =>
document.fonts.load(`${weight} 16px "${family.replace(/"/g, '\\"')}"`),
),
);
fullLoaded.add(family);
}
export async function loadFonts({
families,
}: {
families: string[];
}): Promise<void> {
const googleFonts = families.filter((family) => !SYSTEM_FONTS.has(family));
await Promise.all(googleFonts.map((family) => loadFullFont({ family })));
}
|
