Custom Fonts in React Native for iOS & Android Builds

Don’t want to use the native fonts with React Native…well let’s add some custom fonts then! I’ll show you both approaches to installing custom fonts, one method uses react-native link, while the other method is linking manually, which I started with since I wanted to understand first-hand how the fonts were being set-up in Xcode.

Link Custom Fonts Manually for iOS

1. Open your project in Xcode and make a fonts folder

You will drag and drop your font files into this newly created folder. When dropping the files into the folder you’ll be prompted with this pop-up window. Make sure you select your project name as the added target.

2. Confirm that each font has the correct Target Membership

3. Check that your fonts are included in your bundled resources within the Build Phases section