[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 :

 
 
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/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. 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
     
    Rename TittiliumWeb-Black.ttf into Tittilium Web_black.ttf
    Rename TittiliumWeb-Bold.ttf into Tittilium Web_bold.ttf
    Rename TittiliumWeb-BoldItalic.ttf into Tittilium Web_bold_italic.ttf
    Rename TittiliumWeb-ExtraLightItalic.ttf into Tittilium Web_extra_light_italic.ttf
    Rename TittiliumWeb-Italic.ttf into Tittilium Web_italic.ttf
    Rename TittiliumWeb-Light.ttf into Tittilium Web_light.ttf
    Rename TittiliumWeb-LightItalic.ttf into Tittilium Web_light_italic.ttf
    Rename TittiliumWeb-Regular.ttf into Tittilium Web.ttf
    Rename TittiliumWeb-SemiBold.ttf into Tittilium Web_semi_bold.ttf
    Rename TittiliumWeb-SemiBoldItalic.ttf into Tittilium Web_semi_bold_italic.ttf 
    We add a white space in the font name in each filename so that we can use the same  fontFamily name on both iOS and Android :  fontFamily: Tittilium Web 

5. Usage 

const styles = StyleSheet.create({
customFont: {
fontFamily: 'Tittilium Web',
fontWeight: 'bold',
fontStyle: '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
  • 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.
  • You can list and checkout the available font names on ios by adding those few lines in your Objective-C code :
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.
  • 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