Overriding Reader Fonts

alphonso06 commented 4 months ago

Summary

I'm trying to use custom fonts, both from the source directory and fonts from Google (mostly as a test to see if it will work).

I read both this issue and this one. ~~Based from experience (local machine), I tried using the same Open Dyslexic font which is not installed on my Windows machine, and found that it works.~~

However, using any other fonts that aren't considered web-safe results in the default Times New Roman typeface. Similar case for my Linux machine. All mobile test devices simply don't change fonts at all.

Example Project

This example project is configured to attempt to use the custom Ubuntu Mono font from Google.

Currently it only displays Times New Roman on all my desktop machines, and refuses to change on mobile devices.

Possible Solutions

I'm not sure if it's viable to surgically insert the custom font into every .epub file that requires non-web-safe typefaces. Good alternative might be to just use web-safe fonts, but I might not have this luxury.

Anyway, I'd love to know if I missed anything, or if I could improve the implementation.

--EDIT-- I found that I actually had the Open Dyslexic font installed on my Windows machine. It's now back to Times New Roman when changing fonts.

alphonso06 commented 4 months ago

It might be possible to apply fonts via CDN as demonstrated here.

Though I attempted to do the same in the stackblitz sample project, the Rendition's document body seems to be undefined, causing a white screen of death.

// In the getRendition prop of ReactReader
let el = _rendition
            .getContents()
            .document.body.appendChild(
              _rendition.getContents().document.createElement('link')
            );
          el.setAttribute('rel', 'preload');
          el.setAttribute('as', 'font');
          el.setAttribute('type', 'font/woff');
          el.setAttribute('crossorigin', 'anonymous');
          el.setAttribute(
            'href',
            'https://fonts.cdnfonts.com/s/29616/open-dyslexic.woff'
            );