[BUG] EPUB Font controls do not effect book contents

[LordHerdier]

Description of the Bug

(On nightly) the new font selection under the appearance menu does not effect the contents of the book. The font for the title of the book will change, but nothing else.

Expected Behavior

Expected the font family for the book's content to change, not the font family for the book title.

To Reproduce

Steps to reproduce the behavior:

1. Be on nightly/develop branch
2. Open an epub book
3. Click on theme/appearance controls and change the font family
4. Observe that the font did not change

Screenshots

Notice the title is in OpenDyslexic, while the content is still the default font.

Environment:

• OS: [Debian 12]
• Device: [Desktop]

Build Details:

• Version: [nightly]
• Docker: [yes and no] (can confirm that it doesn't work in dev build or in docker)

Additional context

It doesn't look like EpubJS respects CSS quite the way that would be expected (possibly due to the iframes it's using?), so the current implementation of applying the theme in packages/browser/src/components/readers/epub/themes.ts directly to the reader container may not be the best course of action.

From the epubjs documentation, it looks like you can pass CSS directly to the epub body, so that might be an option to pursue.

I'll take a look at the code and see if I can get this resolved.

[LordHerdier]

Okay so it looks like the issue is with the iframe, but not the CSS like I thought. Turns out that we can apply system fonts directly with epubjs's addStylesheetRules, but our custom ones weren't loading due to the iframe not having access to the font file. Looks like it should work if we inject a style tag into the iframe's tag and have it download the desired font from that.

Going to do a bit more testing..