fix(reader): use blob URLs for fonts to bypass sandboxed iframe restrictions

The paginator renders inside a sandboxed iframe that blocks @font-face
URL fetches. Fonts were never loading — all font-family rules fell back
to the generic 'serif' system font, making every reading font identical.

Fix: fetch font files on the parent page, create blob: URLs via
URL.createObjectURL(), and use those blob URLs in the @font-face rules
injected into the iframe via setStyles(). Blob URLs are always
same-origin with the creating document, so the sandboxed iframe can
access them with allow-same-origin.

Also added Playwrite NZ Guides as a test font for verifying font
switching works.
This commit is contained in:
2026-04-19 21:36:19 -04:00
parent 0007b4d1d0
commit 9ca8e2aa44
4 changed files with 80 additions and 136 deletions
+8
View File
@@ -227,3 +227,11 @@
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Playwrite NZ Guides";
src: url("/static/fonts/Playwrite_NZ_Guides/PlaywriteNZGuides-Regular.woff2")
format("woff2");
font-weight: 400;
font-style: normal;
}