CODEWITHSUNDEEP
androidreact-nativefonts
Emad
Emad

Reputation: 366

React Native custom fonts working on IOS but not on Android

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

Upvotes: 5

Views: 3252

Answers (2)

BlaShadow
BlaShadow

Reputation: 11693

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.

Upvotes: 5

Bruce Lin
Bruce Lin

Reputation: 2740

Check the filename for Android, android need to refer to the file name rather than font family name. Also make sure to set a key to your text/textInput component to make the customized font render properly after changing to a new font. (Android may still render old font if you don't do so)

Upvotes: 1

Related Questions