Google Font does not import into React native app

Question

I am trying to import a font from google fonts into my RN app. However, I came across an issue where it tells me that the font is unrecognizable. Here is what I did:

I downloaded the font and added into an assets folder:

/assests/fonts/

Set up my package.json like this:

"rnpm": {
"assets": [
"./assets/fonts/"
   ]
 }

Ran the following below in terminal:

react-native link

I also went into Info.plist file for ios and manually added the font since it didn't do so after linking:

<key>UIAppFonts</key>
    <array>
        <string>Lacquer-Regular.ttf</string>
    </array>

Finally, I have it labeled like this on my page in vscode.

fontFamily: "Lacquer-Regular"

Any idea as to what may have happened and how it can be fixed?

Answer 1

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

module.exports = {
  assets: ['./assets/fonts/']
};

3- run react-native link command in the root project path.

PS Make sure you have the right path for the fonts folder before running react-native link command

Answer 2

"./assets/fonts/" Does this path contain files? Lacquer-Regular.ttf

If you don't have a file, please add it and link it.

When you make a link, the following result should occur:

And if a link doesn't have a target, it can affect the project by doing all the links. Link directly to the path as possible.

react-native link ./assets/fonts