Custom fonts in React Native
tl;dr
- Create an
assetsfolder and copy your fonts to it - Add config to
react-native.config.js - Run
react-native linkto 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