Problem with loading custom fonts

[fkazemi5236]

There is no ability to add fonts in this package. Images are displayed irregularly on mobile pages and are not appropriate

[gerhardsletten]

@fkazemi5236 The epub-file is a zip of html-documents that can contain custom css and fonts if the publishers added it. Take a look at this recipe on how you can override the inner css of an epub.

For both safety and to avoid styles bleed in or of of the epub-file, epubjs which this library wraps, render the epub inside an iframe, so you will not be able to place a custom font-file inside the epub-file, but it could be that you will be able to load the font-file from an url, but it could be that there are cors issues with this

[fkazemi5236]

tnks
I tried so hard. I was able to add to that style using the override method
like this:
rendition.themes.override('color' , '#424242')

[fkazemi5236]

There is no way to add fonts from Google. In this style writing model, font-face cannot be inserted

[gerhardsletten]

@fkazemi5236 Maybe you could look in issues for epubjs, see one resent issue about fonts there

[josejuansanz]

Hi,

I know this is closed, but I had the same problem and found a solution. I've used the Web Font Loader library, which allows us to load fonts from different providers (Google fonts included) and it has a configuration parameter to inject the fonts into an iframe.

So, what I've done is to use this library to load the fonts I want once the epub has been rendered:

getRendition={async (rendition) => {
  rendition.on('rendered', () => {
    WebFont.load({
      google: {
        families: ['Droid Sans', 'Droid Serif']
      },
      context: window.frames[0],
    });
  });
}};

Hope this helps.