React Native Custom Fonts
TLDR => Quick tutorial on setting up custom fonts with React Native across iOS and Android.
Cross Platform Custom Font Naming
To avoid conditional logic in your React Native styles it’s a good plan to rename a font if necessary to ensure it is read the same on both iOS and Android.
For example, I’m using a font file named “vinchand.ttf”. Yet when I open it up in FontBook.app I can see that the fonts full name is “vincHand” with a capital H.
To ensure things run smoothly I’m going to rename the font to be “vincHand.ttf” as Android will read from the filename whilst iOS will read from the full name property.
Add Fonts to Assets
Next add all the font files you want to an “assets/fonts” folder in the root of your react native project:
Package.json
Next we need to tell React Native where our custom fonts are located. We do this by adding rnpm to package.json providing the path to the font files:
Then we tell react native to link those font files for us:
This should add the font references in your Info.plist file for iOS and on Android copy the font files to android/app/src/main/assets/fonts. You can verify this by opening up Info.plist from the iOS folder and looking for a UIAppFonts key, you should see something similar to:
Adding Fonts to Android
On Android if you look in the file path “android/app/src/main/assets/fonts/” you should see your fonts have been copied over:
React Native Styles
With your fonts embedded and referenced it’s a simple case of adding them to your React Native styles. Simply add a fontFamily property with your font name:
How to add fonts to create-react-app based projects?
It’s not clear where fonts imported via @font-face and loaded locally should go.
Including the gist to which Dan referring in his answer
10 Answers 10
There are two options:
Using Imports
This is the suggested option. It ensures your fonts go through the build pipeline, get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files are missing.
As described in “Adding Images, Fonts, and Files”, you need to have a CSS file imported from JS. For example, by default src/index.js imports src/index.css :
Normally this should be enough.
Using public Folder
If for some reason you prefer not to use the build pipeline, and instead do it the “classic way”, you can use the public folder and put your fonts there.
The downside of this approach is that the files don’t get hashes when you compile for production so you’ll have to update their names every time you change them, or browsers will cache the old versions.
And inside of it, you would use the regular CSS notation:
Note that since we’re avoiding the build pipeline in this example, it doesn’t verify that the file actually exists. This is why I don’t recommend this approach. Another problem is that our index.css file doesn’t get minified and doesn’t get a hash. So it’s going to be slower for the end users, and you risk the browsers caching old versions of the file.
Which Way to Use?
Go with the first method (“Using Imports”). I only described the second one since that’s what you attempted to do (judging by your comment), but it has many problems and should only be the last resort when you’re working around some issue.