Custom Fonts in React Native for Android

Currently I am experimenting with React Native for Android during Hackweek at the New York Times. And of course, it wouldn’t be the New York Times if they hadn’t their own fonts and style specs that are important.

If you are like me looking to implement custom fonts using React Native for Android, good news, with commit bfeaa6a this is now possible. Let’s walk through it step by step:

• First, make sure you are up to version 0.16+ with react-native.
• Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
  (You might have read somewhere to put the fonts in /projectname/android/app/src/main/res/assets/fonts; that’s wrong though. )
• Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf
• You can add your styles like this: {fontFamily: ‘fontname’}
• And should see the new fonts applied after running:

react-native run-android

Hope that helps.