react native custom fonts

Question

This question has been already here and here, but the answer is not satisfactory there. The fonts are not working on android but on iOS do. Maybe I made some mistake during the linking.

How did I added fonts:

1. Created folder assets/fonts/ inside root folder.

2. Added

   "rnpm": { "assets": ["./assets/fonts"] }
   

3. react-native link

4. Console output was it successfully added assets to iOS and Android

5. Added fontFamily: 'MyCustomFontFamily' into styles.

6. Run on iOS, everything worked fine.

7. Run on Android, no typeface.

8. Checked the android project directory and the assets folder was present

9. I tried adding (Platform.OS === 'ios') ? 'MyCustomFontFamily' : 'fonts/my_custom_font_family' to go with the file name but this did not work wither.

10. Tried same variation as 9 without path or with extension but no luck

11. Read here to use weight, tried it, no luck.

Answer 1

I had the same issue, which had to do with the fact that, as you already know, Android will read from the filename whilst iOS will read from the full name property. And, indeed, I had mixed up my fonts' references.

The first thing I did to solve this was to double-check that my fonts were properly located in android/app/src/main/assets/fonts/.

Then I ended up renaming my fonts to the exact same name as the one used by iOS and using that name as a reference. Here is what I mean:

export const sansSerifLight = 'Aileron-Light'; // Filename is 'Aileron-Light.otf'
export const sansSerifRegular = 'Aileron-Regular'; // Filename is 'Aileron-Regular.otf'
export const sansSerifBold = 'Aileron-Bold'; // Filename is 'Aileron-Bold.otf'
export const serifRegular = 'LibreBaskerville-Regular'; // Filename is 'LibreBaskerville-Regular.ttf'
export const serifBold = 'LibreBaskerville-Bold'; // Filename is 'LibreBaskerville-Bold.ttf'
export const serifItalic = 'LibreBaskerville-Italic'; // Filename is 'LibreBaskerville-Italic.ttf'
export const sansSerifTitle = 'ADAM.CG PRO'; // Filename is 'ADAM.CG PRO.otf'
export const serifTitle = 'Oranienbaum'; // Filename is 'Oranienbaum.ttf

And then :

<MyComponent style={{ fontFamily: serifTitle }} />

This really made things way less error-prone and easier to maintain for me.