Gate WebGL book texture fonts

public/js/book-texture-renderer-module.js

@@ -37,8 +37,9 @@ class BookTextureRendererModule extends BaseModule {
 
         this.bindMethods([
             'initialize',
+            'waitForTextureFonts',
+            'ensureTextureFontFace',
             'createPageCanvases',
-            'drawEmptySpread',
             'drawSpread',
             'drawPageBase',
             'drawPageLines',
@@ -60,8 +61,7 @@ class BookTextureRendererModule extends BaseModule {
             'publishSpread',
             'getPageCanvas',
             'getHitMap',
-            'handlePageCountChanged',
-            'handleSceneReady'
+            'handlePageCountChanged'
         ]);
     }
 
@@ -70,12 +70,10 @@ class BookTextureRendererModule extends BaseModule {
         this.pagination = this.getModule('book-pagination');
         this.localization = this.getModule('localization');
         this.reportProgress(10, 'Waiting for book fonts');
-        if (document.fonts?.ready) await document.fonts.ready;
+        await this.waitForTextureFonts();
         this.reportProgress(20, 'Preparing page texture canvases');
         this.createPageCanvases();
-        this.drawEmptySpread();
         this.addEventListener(document, 'webgl-book:page-count-changed', this.handlePageCountChanged);
-        this.addEventListener(document, 'webgl-book:scene-ready', this.handleSceneReady);
         this.addEventListener(document, 'book-pagination:spread-updated', (event) => {
             const spread = event.detail?.spread || this.pagination?.getCurrentSpread?.();
             const latestBlockId = event.detail?.latestBlockId;
@@ -106,6 +104,28 @@ class BookTextureRendererModule extends BaseModule {
         return true;
     }
 
+    async waitForTextureFonts() {
+        if (!document.fonts) return;
+        await Promise.all([
+            this.ensureTextureFontFace('EB Garamond', '/fonts/EBGaramond12-Regular.otf'),
+            this.ensureTextureFontFace('EB Garamond 12', '/fonts/EBGaramond12/webfonts/EBGaramond-Regular.woff2'),
+            this.ensureTextureFontFace('EB Garamond Initials', '/fonts/EB-Garamond-Initials/EBGaramond-0.016/otf/EBGaramond-Initials.otf')
+        ]);
+        await Promise.all([
+            document.fonts.load('24px "EB Garamond"'),
+            document.fonts.load('24px "EB Garamond 12"'),
+            document.fonts.load('72px "EB Garamond Initials"')
+        ]);
+        await document.fonts.ready;
+    }
+
+    async ensureTextureFontFace(family, url) {
+        if (!window.FontFace) return;
+        const face = new FontFace(family, `url(${url})`);
+        const loadedFace = await face.load();
+        document.fonts.add(loadedFace);
+    }
+
     createPageCanvases(textureWidth = this.pageFormat?.getTextureWidth?.() || 3072) {
         this.metrics = this.pageFormat.getTextureMetrics(textureWidth);
         ['left', 'right'].forEach((side) => {
@@ -117,12 +137,6 @@ class BookTextureRendererModule extends BaseModule {
         });
     }
 
-    drawEmptySpread() {
-        this.drawPageBase('left');
-        this.drawPageBase('right');
-        this.publishSpread();
-    }
-
     drawSpread(spread = null, sides = null) {
         this.currentSpread = spread || { left: [], right: [] };
         const sidesToDraw = Array.isArray(sides) && sides.length ? sides : ['left', 'right'];
@@ -542,9 +556,6 @@ class BookTextureRendererModule extends BaseModule {
         this.drawSpread(this.currentSpread || this.pagination?.getCurrentSpread?.());
     }
 
-    handleSceneReady() {
-        this.publishSpread();
-    }
 }
 
 const bookTextureRenderer = new BookTextureRendererModule();