Adding fonts can be a little tough to figure out with React Native. This is a simple reference guide for anyone having issues. This little guide should also help you if you are running into an “Unrecognized font family” error. This process will add the fonts to Xcode which will allow you to reference and use in your React Native app. For this example, we are going to use the font Josefin
.
Pick a typeface from Font Book
Looking at the font information:
Make sure to note the following information about your font:
- File name (ours will be
Josefin.ttf
- Font family (ours will be
Josefin Sans
)
Get your file assets
I used Josefin Sans regular.ttf
and renamed to just Josefin.ttf
Add the font to Xcode
- Drag and drop fonts from
Finder
to your Xcode project. - Select your application name in
Add to targets
list - Open
Info.plist
from Navigator in Xcode. - Add
Fonts provided by application
as a new key- Expand
Fonts provided by application
array to find an initialItem 0
entry with no value - Set the
Item 0
value to the file name (with extension) - Create additional entries for more fonts
- Expand
- Run
Shift + Command + K
to clean last build - Run
Command + B
to start a new build - Run
Command + R
to run the application
Note: If you receive errors such as
Unrecognized font family
you may need to stop your project, clean and then build again. One way to ensure proper loading of the fonts is to openLaunchImage.xib
and use these custom fonts on your startup screen. Xcode will do some magic for you behind the scenes to assure your font is copied into the application.
Using a custom font in React Native
With our Josefin
example from above, we would use Josefin Sans
in the code below:
var styles = React.StyleSheet.create({
title: {
fontFamily: 'Font Family Name'
}
});