[fa icon="calendar"] Publié le 28 February 2017 par Guillaume Diallo-Mulliez


Your React Native application needs a custom font to be the prettiest ? Here are the few steps you need to add it.

 

Intro_GIF.gif

 

1. Get the font

In order to add your font to your app, you'll need the .ttf files for all supported styles (bold, italic ...)

TittiliumWeb-Bold.ttf
TittiliumWeb-BoldItalic.ttf
TittiliumWeb-Italic.ttf
TittiliumWeb-Light.ttf
TittiliumWeb-LightItalic.ttf
TittiliumWeb-Regular.ttf
TittiliumWeb-SemiBold.ttf
TittiliumWeb-SemiBoldItalic.ttf
TittiliumWeb-Thin.ttf
TittiliumWeb-ThinItalic.ttf

You can, for instance, get your font from Google Fonts.

 

2. Add the font to your project

Add the font folder into your project :

 
 
CustomFontApp/
android/
ios/
assets/
fonts/
TittiliumWeb/
TittiliumWeb-Black.ttf
TittiliumWeb-Bold.ttf
TittiliumWeb-BoldItalic.ttf
TittiliumWeb-ExtraLightItalic.ttf
TittiliumWeb-Italic.ttf
TittiliumWeb-Light.ttf
TittiliumWeb-LightItalic.ttf
TittiliumWeb-Regular.ttf
TittiliumWeb-SemiBold.ttf
TittiliumWeb-SemiBoldItalic.ttf
...

 

Add the rnpm link to your font in your project's package.json:

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

and run:

react-native link

This command will:

  • for iOS: link your font located in the path specified above (assets/fonts/) to your Xcode project
  • for Android: copy the font in theandroid/app/src/main/assets/fonts folder

 

4. Format the Android font files

In the android/app/src/main/assets/fonts folder where your font was copied, rename the files so that:

  • the prefix matches your .ttf files names
  • the suffix is snake_case
     
    TittiliumWeb-Black.ttf -> Tittilium Web_black.ttf
    TittiliumWeb-Bold.ttf -> Tittilium Web_bold.ttf
    TittiliumWeb-BoldItalic.ttf -> Tittilium Web_bold_italic.ttf
    TittiliumWeb-ExtraLightItalic.ttf -> Tittilium Web_extra_light_italic.ttf
    TittiliumWeb-Italic.ttf -> Tittilium Web_italic.ttf
    TittiliumWeb-Light.ttf -> Tittilium Web_light.ttf
    TittiliumWeb-LightItalic.ttf -> Tittilium Web_light_italic.ttf
    TittiliumWeb-Regular.ttf -> Tittilium Web.ttf
    TittiliumWeb-SemiBold.ttf -> Tittilium Web_semi_bold.ttf
    TittiliumWeb-SemiBoldItalic.ttf -> Tittilium Web_semi_bold_italic.ttf 
     

5. Usage 

const styles = StyleSheet.create({
customFont: {
fontFamily: 'Tittilium Web',
fontWeight: 'bold',
fontStyle: 'italic'
}
});

...

<Text style={styles.customFont}>My awesome font</Text>; 

Note that the app should be rebuilt for the font to be recognized:

react-native run-ios
react-native run-android 

 

Platforms specificities

iOS
  • The font name in the .ttf files must be in PascalCase while thefontFamily property in your js code must be Spaced Case.
  • You can then use the fontWeight values specified in React Native's Text component documentation.
Android
  • The fontFamily property must match the font name used in your font files.
  • In the font file names, the fontFamily name and the style suffix must be separated by an underscore
  • Only the bold fontWeight is available. For other weights, you'll need to use the actual name of the font file as fontFamily:
 
const styles = StyleSheet.create({
extraLightFont: {
fontFamily: 'Tittilium Web_extra_light',
}
blackFont: {
fontFamily: 'Tittilium Web_black',
}
});

Enjoy your awesome app with a great font !

 

Example

You can find a step by step example in this rn-custom-font repo.

iOS Custom Font Example

Android Simulator Screen Shot.png 

Help needed

I have been unable to figure out why there seems to be no difference between the Light, the ExtraLight and Light fonts on iOS on the one hand and no differences between ExtraLight, Light, Regular andSemiBold, Bold and Black on Android. If you have any idea on the subject, please do provide an answer on my related stackoverflow post. Thank you very much.

Going further

You can also add a custom font for your custom icons. Check out ourAdd custom icons to your React Native application article


Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris




Want to rate this article?
Submit Rating

Topics: React Native