React Native custom fonts working on IOS but not on Android

Question

I've added the Google Font Fira Sans fonts (Italic, Bold, Regular), following the react-native link procedure.

I can see the fonts have been copied to src/main/assets/fonts, likewise in Resources folder for IOS

The fonts work fine on IOS but on android only Bold works but the Italic or Regular or any other font it doesnt work.

I have tried to set the fontFamily to the name property of the font but still no change

This is how I set my font variable

export const Fonts = {
    //Working on IOS but not on Android
    //I have tried `FiraSans-Italic` `Fira Sans Italic` and nothing works
    FiraSansItalic: (Platform.OS === 'ios') ? "FiraSans-Italic" : 'Fira Sans Italic',

    //Bold works fine for both platforms
    FiraSansBold: (Platform.OS === 'ios') ? "FiraSans-Bold" : "FiraSans-Bold"
}

Any ideas what could be wrong?

Thank you

You need to refer the full font file name on Android, where on iOS you refer to font family name. For instance: const FiraSans = (Platform.OS === 'ios') ? 'Fira Sans' : 'FiraSans.ttf'; (this is a comment provided without seeing the actual code). — Samuli Hakoniemi
@zvona thank you for your reply. I do have it exactly how you posted (Platform.OS === 'ios') ? "FiraSans-Italic" : 'FiraSans-Italic.ttf , I did try to put the file extension like you have it but still no luck — Emad
This is how the full name when I check the font with Font book Fira Sans Italic, but even if I name the fontFamily like that it doesnt work — Emad

BlaShadow BlaShadow · Accepted Answer · 2019-03-18T20:15:46

For someone who got the same problem make sure you're not applying any of these (fontWeight or fontStyle) style to your textStyle if you do so it will drop your custom font style from your text.

React Native custom fonts working on IOS but not on Android

2 Answers