Notes

Custom fonts in React Native

adding custom fonts to a React Native app with react-native.config.js and react-native link, why .woff won’t work, and fixing a linking assets error

Edit on GitHub

React Native & Expo
React Native fonts iOS Android

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
1// react-native.config.js
2module.exports = {
3  assets: ['./assets/fonts/Graphik'],
4}

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

Related

Browse all topics