Improve fonts loading (#3682)

Author: gregberge

packages/gitbook/src/lib/imageFonts.ts

@@ -4,12 +4,19 @@ import { type FontWeight, getDefaultFont } from '@gitbook/fonts';
 import { getFontSourcesToPreload } from '@/fonts/custom';
 import type { GitBookSiteContext } from '@/lib/context';
 import { filterOutNullable } from '@/lib/typescript';
+import QuickLRU from 'quick-lru';
 
 type ComputeFontsInput = {
     regularText: string;
     boldText: string;
 };
 
+// Google fonts are more likely to be reused, so we keep a larger cache
+const googleFontsCache = new QuickLRU<string, unknown>({ maxSize: 50 });
+
+// Custom fonts are less likely to be reused, so we keep a smaller cache
+const customFontsCache = new QuickLRU<string, unknown>({ maxSize: 10 });
+
 export async function computeImageFonts(
     customization: GitBookSiteContext['customization'],
     input: ComputeFontsInput
@@ -65,17 +72,18 @@ async function loadGoogleFont(input: {
 
     // If we found a font file, load it
     if (lookup) {
-        return getWithCache(`google-font-files:${lookup.url}`, async () => {
+        return getWithCache(googleFontsCache, lookup.url, async () => {
             const response = await fetch(lookup.url);
-            if (response.ok) {
-                const data = await response.arrayBuffer();
-                return {
-                    name: lookup.font,
-                    data,
-                    style: 'normal' as const,
-                    weight: input.weight,
-                };
+            if (!response.ok) {
+                throw new Error(`Failed to load font from ${lookup.url}: ${response.statusText}`);
             }
+            const data = await response.arrayBuffer();
+            return {
+                name: lookup.font,
+                data,
+                style: 'normal' as const,
+                weight: input.weight,
+            };
         });
     }
 
@@ -85,39 +93,42 @@ async function loadGoogleFont(input: {
 
 async function loadCustomFont(input: { url: string; weight: 400 | 700 }) {
     const { url, weight } = input;
-    const response = await fetch(url);
-    if (!response.ok) {
-        return null;
-    }
+    return getWithCache(customFontsCache, `${url}:${weight}`, async () => {
+        const response = await fetch(url);
 
-    const data = await response.arrayBuffer();
+        if (!response.ok) {
+            throw new Error(`Failed to load custom font from ${url}: ${response.statusText}`);
+        }
 
-    return {
-        name: 'CustomFont',
-        data,
-        style: 'normal' as const,
-        weight,
-    } as const;
-}
+        const data = await response.arrayBuffer();
 
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-const staticCache = new Map<string, any>();
+        return {
+            name: 'CustomFont',
+            data,
+            style: 'normal' as const,
+            weight,
+        } as const;
+    });
+}
 
-async function getWithCache<T>(key: string, fn: () => Promise<T>) {
-    const cached = staticCache.get(key) as Promise<T>;
+/**
+ * Simple in-memory cache to avoid loading the same font multiple times.
+ */
+function getWithCache<T>(
+    cache: QuickLRU<string, unknown>,
+    key: string,
+    fn: () => Promise<T>
+): Promise<T> {
+    const cached = cache.get(key);
     if (cached) {
-        return cached;
+        return cached as Promise<T>;
     }
 
-    const promise = fn();
-    staticCache.set(key, promise);
-
-    try {
-        const result = await promise;
-        return result;
-    } catch (error) {
+    const promise = fn().catch((error) => {
         // Remove the failed promise from cache so it can be retried
-        staticCache.delete(key);
+        cache.delete(key);
         throw error;
-    }
+    });
+    cache.set(key, promise);
+    return promise;
 }