Custom fonts in React Native

tl;dr

1. Create an assets folder and copy your fonts to it
2. Add config to react-native.config.js
3. Run react-native link to install fonts for both Android and iOS

// react-native.config.js
module.exports = {
  assets: ["./assets/fonts/Graphik"],
};

android/app/src/main/assets/

The value for fotFamily (or just font-family if you're usig styled-components) will be the font filename minus the extension.

Notes of font formats

Use .otf or .ttf.

.woff won't work. (.woff is a compressed version of OpenType .otf or TrueType .ttf)

Troubleshooting

error Linking assets failed. Run CLI with --verbose flag for more details.
SyntaxError: Expected [\n\r] but end of input found.

Add a new line at the end of ios/[Project].xcodeproj/project.pbxproj and run react-native link again

Links

• Ultimate guide to use custom fonts in react native
• Error: Expected [\n\r] but end of input found.
• How to use fonts in your hybrid mobile app