Problem when rendering Open-sans font in React Native V 60+

Question

i want to add 'Open-sans' font to my App but i have an issue and it happens on IOS simulator only

here is my steps :

a) I've created a folder in root app as : assets then fonts fonts folder in assets and put Open-sans.ttf

b) I've made a file in root with the name react-native-config.js and add:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

c) react-native link

d) In the App.js

<Text style={{fontFamily: 'OpenSans-Bold', fontWeight: 'bold'}}>
  This is my first App
</Text>

My problem is it keeps telling me `Unrecognized font family' whenever i made any edit in the App.js

but when i open react-native-config.js and do nothing but save only the hot reload fired and the font is working

as i mentioned it's perfect on Android but the error appears on IOS when save after any edit on App.js file

Answer 1

For IOS the font-family value is fullname and for android its file name. Try:

<Text style={{fontFamily: 'Open Sans Bold'}}>

This is my first App

for android, change the file name 'OpenSans-Bold.ttf' to 'Open Sans Bold.ttf

Answer 2

I was with the same error, so thats what I did: 1 - Rename react-native-config.js to react-native.config.js and put this script on file:

module.exports = {
  assets: ['./src/assets/fonts'], // this is my path
};

2 - put it on my package.json :

rnpm": {
    "ios": {},
    "android": {},
    "assets": [
      "./src/assets/font"// this is my path
    ]
  },

and After I run react-native link && yarn react-native link.

Check if your info-plist and your android assets are changed

Answer 3

As per your description you have only put Open-sans.ttf in asset folder. But you are trying to access OpenSans-Bold which is not added to your asset folder. To get access to any particular font, you need to add that one to the asset folder. Here is an example for your referrence...

you can check this too for better understanding

Answer 4

Pretty easy...

To embed a font, copy the code into the of your html:

<link>@import
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

CSS rules to specify families

font-family: 'Open Sans', sans-serif;