react-native: Cannot use custom font with RN >= 0.60 --template typescript. react-native.config.js ignored

I am trying to use a custom font in a freshly new React-native project made with the typescript template and I do not succeed to add a custom font family.

All the doc I found told me to use rnpm which has been now deprecated in favor of a react-native.config.js file in the root folder. I therefore created this file in my project but I did not see anywhere where to tell the react-native builder to read it and therefore I get the error font_name not found

Has anyone any suggestion ?

React Native version:

System:
    OS: macOS 10.14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Memory: 1.71 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.10.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

react-native init your_project --template typescript
Create a folder assets/fonts and put all your custom fonts : (mine were Lato-(Regular,…).ttf)
Create a react-native.config.js in the root folder of your project as follow

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts'], // stays the same
  // commands: require('./path-to-commands.js'), // formerly "plugin", returns an array of commands
};

Use the font in the app Component as styling of you text
run react-native run-ios
You’ll get an error “font Lato (in my case) not found”

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 19

Most upvoted comments

got the mistake,

Config should look like ::

module.exports = {
      assets: ['./Source/Resources/Fonts/']
  };

Instead of

module.exports = {
    dependency: {
      assets: ['./Source/Resources/Fonts/']
    },
  };

This should be mentioned in the doc. And both react-native link & yarn react-native link work fine

+10

Ravi448 on Jul 20, 2019

I got it working for RN v0.60.5 by doing these steps.

1- Created a file in the react-native.config.js in the root of the project. 2- Paste this below code into above created file

module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'] }; . // Note assets folder created at root level (assets->fonts->YOUR FONT FILE)

3- Link assets to your project by running react-native link 4- Run project react-native run-ios

hopefully it should work fine.

alitele on Sep 21, 2019

@thehanimo Thank you, that did the job!

Nico924 on Jul 18, 2019

Link the assets manually using react-native link. This will give you a warning saying

Group ‘Resources’ does not exist in your Xcode project. We have created it automatically for you.

After that, build again using react-native run-ios or whatever commands you use to build.

thehanimo on Jul 18, 2019

You may have an error in path to /fonts. Try this: assets: [‘./src/app/assets/fonts/’]

lapucher on Jul 18, 2019