Unable to load fonts with opentype.js in bare react-native

Question

I'm using this function to load a font with opentype.js in a bare react-native app running on Android, but I'm getting the error "Font could not be loaded" :

const fontLoader = (url) =>
  new Promise((resolve, reject) => {
    opentype.load('fonts/TextMe-Regular.otf', (error, font) => {
      if (error) {
        console.log('error on fontLoader:', error);
        reject(error);
      }
      console.log('fontLoader:', font);
      resolve(font);
    });
  });

I've checked the folder inside android > app > src > main > assets > fonts and the TextMe-Regular.otf is there. My app structure is index.js, App > assets > fonts

EDIT:

I've found a way to load the font from this absolute path:

10.0.2.2:8081/assets/assets/fonts/TextMe-Regular.otf

but I can't find the relative path.

Why do you need to load font? Try this `` – Pir Shukarullah Shah Nov 10 '20 at 09:31 — Pir Shukarullah Shah, Nov 10 '20 at 09:31
@PirShukarullahShah [opentype.js](https://opentype.js.org) – Cris69 Nov 10 '20 at 09:49 — Cris69, Nov 10 '20 at 09:49

score 0 · Accepted Answer · answered Mar 16 '21 at 19:32

This is my hacky way to dinamically load fonts avoiding Expo. First of all I linked my assets folder, then I've installed the RNFS to read the font files and used the _base64ToArrayBuffer function to provide a buffer for opentype.

const fontLoader = (url) =>
  new Promise((resolve, reject) => {
    const encodedFont = await RNFS.readFileAssets('fonts/TextMe-Regular.otf')
    const bufferedFont = _base64ToArrayBuffer(encodedFont);
    const loadedFont = opentype.parse(bufferedFont);
    resolve(loadedFont);
    });
  });

Unable to load fonts with opentype.js in bare react-native

1 Answers1