Add font loader and update reader template for font loading

- Add font-loader.ts for managing 8 reading fonts with preload optimization - Include fonts: Literata, Crimson Text, Source Serif 4, EB Garamond, Libertinus Serif, Noto Serif, Charis SIL, IBM Plex Serif - Update reader.templ to include reader-fonts.css stylesheet
2026-04-04 01:00:23 -04:00
parent d52937e578
commit 2eddc1b92b
2 changed files with 86 additions and 1 deletions
@@ -0,0 +1,73 @@
+// Font loading with performance optimization
+
+const READING_FONTS = [
+  {
+    id: "literata",
+    name: "Literata",
+    stack: "Literata, serif",
+    description: "Designed for Google Play Books",
+  },
+  {
+    id: "crimson",
+    name: "Crimson Text",
+    stack: "Crimson Text, serif",
+    description: "Optimized for screen reading",
+  },
+  {
+    id: "source-serif",
+    name: "Source Serif 4",
+    stack: "Source Serif 4, serif",
+    description: "Professional Adobe quality",
+  },
+  {
+    id: "eb-garamond",
+    name: "EB Garamond",
+    stack: "EB Garamond, serif",
+    description: "Classic elegance",
+  },
+  {
+    id: "libertinus",
+    name: "Libertinus Serif",
+    stack: "Libertinus Serif, serif",
+    description: "Excellent for technical content",
+  },
+  {
+    id: "noto-serif",
+    name: "Noto Serif",
+    stack: "Noto Serif, serif",
+    description: "Maximum language support",
+  },
+  {
+    id: "charis-sil",
+    name: "Charis SIL",
+    stack: "Charis SIL, serif",
+    description: "Multilingual specialist",
+  },
+  {
+    id: "ibm-plex",
+    name: "IBM Plex Serif",
+    stack: "IBM Plex Serif, serif",
+    description: "Modern & versatile",
+  },
+];
+
+// Preload critical fonts (default font + user's last choice)
+async function preloadFonts(userPreferredFont: string): Promise<void> {
+  const fontsToPreload = new Set(["literata", userPreferredFont]);
+
+  for (const fontId of fontsToPreload) {
+    const font = READING_FONTS.find((f) => f.id === fontId);
+    if (font) {
+      document.fonts.load(`16px "${font.stack}"`);
+    }
+  }
+}
+
+// Get font stack for CSS
+function getFontStack(fontId: string): string {
+  const font = READING_FONTS.find((f) => f.id === fontId);
+  return font?.stack || "Literata, serif";
+}
+
+// All fonts bundled - no network requests needed
+export { READING_FONTS, preloadFonts, getFontStack };