john-okeefe
9ca8e2aa44
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.
238 lines
6.0 KiB
CSS
238 lines
6.0 KiB
CSS
/* Libre reading fonts for Bookhoard ebook reader */
|
|
|
|
/* Literata - Designed for Google Play Books */
|
|
@font-face {
|
|
font-family: "Literata";
|
|
src: url("/static/fonts/literata/Literata-Variable.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Literata";
|
|
src: url("/static/fonts/literata/Literata-Variable.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Literata";
|
|
src: url("/static/fonts/literata/Literata-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "Literata";
|
|
src: url("/static/fonts/literata/Literata-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Crimson Text - Optimized for screen reading */
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("/static/fonts/crimson/CrimsonPro-Variable.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("/static/fonts/crimson/CrimsonPro-Variable.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("/static/fonts/crimson/CrimsonPro-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("/static/fonts/crimson/CrimsonPro-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Source Serif 4 - Adobe professional quality */
|
|
@font-face {
|
|
font-family: "Source Serif 4";
|
|
src: url("/static/fonts/source-serif/SourceSerif4-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Source Serif 4";
|
|
src: url("/static/fonts/source-serif/SourceSerif4-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Source Serif 4";
|
|
src: url("/static/fonts/source-serif/SourceSerif4-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "Source Serif 4";
|
|
src: url("/static/fonts/source-serif/SourceSerif4-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* EB Garamond - Classic elegance */
|
|
@font-face {
|
|
font-family: "EB Garamond";
|
|
src: url("/static/fonts/eb-garamond/EBGaramond-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "EB Garamond";
|
|
src: url("/static/fonts/eb-garamond/EBGaramond-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "EB Garamond";
|
|
src: url("/static/fonts/eb-garamond/EBGaramond-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "EB Garamond";
|
|
src: url("/static/fonts/eb-garamond/EBGaramond-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Libertinus Serif - Academic/technical */
|
|
@font-face {
|
|
font-family: "Libertinus Serif";
|
|
src: url("/static/fonts/libertinus/LibertinusSerif-Regular.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Libertinus Serif";
|
|
src: url("/static/fonts/libertinus/LibertinusSerif-Bold.woff2")
|
|
format("woff2");
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
@font-face {
|
|
font-family: "Libertinus Serif";
|
|
src: url("/static/fonts/libertinus/LibertinusSerif-Italic.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "Libertinus Serif";
|
|
src: url("/static/fonts/libertinus/LibertinusSerif-BoldItalic.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Noto Serif - Maximum language support */
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
src: url("/static/fonts/noto-serif/NotoSerif-Variable.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
src: url("/static/fonts/noto-serif/NotoSerif-Variable.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
src: url("/static/fonts/noto-serif/NotoSerif-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
src: url("/static/fonts/noto-serif/NotoSerif-Italic-Variable.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Charis SIL - Multilingual specialist */
|
|
@font-face {
|
|
font-family: "Charis SIL";
|
|
src: url("/static/fonts/charis-sil/CharisSIL-Regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Charis SIL";
|
|
src: url("/static/fonts/charis-sil/CharisSIL-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "Charis SIL";
|
|
src: url("/static/fonts/charis-sil/CharisSIL-Italic.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "Charis SIL";
|
|
src: url("/static/fonts/charis-sil/CharisSIL-BoldItalic.woff2")
|
|
format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* IBM Plex Serif - Modern & versatile */
|
|
@font-face {
|
|
font-family: "IBM Plex Serif";
|
|
src: url("/static/fonts/ibm-plex/IBMPlexSerif-Regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "IBM Plex Serif";
|
|
src: url("/static/fonts/ibm-plex/IBMPlexSerif-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "IBM Plex Serif";
|
|
src: url("/static/fonts/ibm-plex/IBMPlexSerif-Italic.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: "IBM Plex Serif";
|
|
src: url("/static/fonts/ibm-plex/IBMPlexSerif-BoldItalic.woff2")
|
|
format("woff2");
|
|
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;
|
|
}
|