Custom fonts to a React Native Application for iOS

Indu Pal
Indu Pal
Jul 30, 2017 · 2 min read
  1. Add all fonts inside the fonts folder and place it in the directory inside your project. For example in ./assets/fonts/

2. Add there path inside your package.json file:

“rnpm”: {
“assets”: [“./path to your fonts”]
}
in our example path is - ./assets/fonts

3. Then we need to link fonts files to React Native, open terminal window and type:

$ react-native link

After running this command you should see something like this in you terminal.

$ react-native link result

Now you fonts are linked in React Native.

4. Open iOS folder and see Info.plist,

Array of fonts items

5. After that you need to add fonts folder inside the directory of Resources of your project folder in iOS.

6. Check that your fonts are included as Resources in your Bundle, open your Build Phases pane by highlighting the XCode project file in your solution explorer and on the right hand side, select “Build Phases”. You’ll see that one of the sections you can expand is “Copy Bundle Resources”. Open that list and make sure that your fonts are included in that list.

7. Fonts are successfully add into iOS project, you can use this into your React Native stylesheet.

8. Name of the font that you write in stylesheet may differ for iOS and Android used proper fonts names, font names for iOS.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade