[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 (other formats such as .otf are also supported) 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 :

⚠️You should rename the fonts file following the font's Full Name.
For each font file, right click on it and choose "Get Info" to display the font's Full Name  
 
Screen Shot 2018-07-30 at 09.21.48
 
 
CustomFontApp/
android/
ios/
assets/
fonts/
TittiliumWeb/
Tittilium WebBlack.ttf
Tittilium WebBold.ttf
Tittilium WebBold Italic.ttf
Tittilium WebThin Italic.ttf
Tittilium WebItalic.ttf
Tittilium WebLight.ttf
Tittilium WebLight Italic.ttf
Tittilium Web.ttf
Tittilium WebSemiBold.ttf
Tittilium WebSemiBold Italic.ttf
...

 

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

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

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. Usage 

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

...

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

⚠️ All fonts might not support every  fontWeight or fontStyle  so you might need to checkout your font's documentation to see which are supported

 

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

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

 

Platforms specificities

iOS
NSArray *fontFamilies = [UIFont familyNames];

for (int i = 0; i < [fontFamilies count]; i++)
{
    NSString *fontFamily = [fontFamilies objectAtIndex:i];
    NSArray *fontNames = [UIFont fontNamesForFamilyName:[fontFamilies objectAtIndex:i]];
    NSLog (@"%@: %@", fontFamily, fontNames);
}
Android
  • The fontFamily property must match the font name used in your font files (Full Name)
  • 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({
thinFont: {
fontFamily: 'Tittilium WebThin',
}
blackFont: {
fontFamily: 'Tittilium WebBlack',
}
});

Enjoy your awesome app with a great font !

 

Example

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

Screen Shot 2018-07-30 at 14.27.20

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