Add custom fonts react-native for iOS and don't die trying

Today I'm going to share with you an issue that bothered me for several days. So I thought it was a good idea to write how I solved it. Because I couldn't find the exact solution to fix this, not even on stackoverflow.

My problem was the following:

I installed new fonts for the project I'm working on. When the app opened, everything worked correctly, but when it went to the background, and then back to the foreground, the new fonts stopped rendering and the styling was not applied.

I followed all the steps that appear in many places. I share below two links with these steps, because this is what is everywhere:

• https://dev.to/aneeqakhan/add-custom-fonts-in-react-native-0-63-for-ios-and-android-3a9e

• https://medium.com/react-native-training/adding-custom-fonts-to-react-native-b266b41bff7f

However, even though everything was in order, the bug kept reproducing itself. I followed all the steps, installed the fonts correctly but the bug was still there.

So after so many hypotheses, searches and that almost makes me crazy, the only thing that finally helped me is the following:

1. Rename the fonts: remove all spaces, removing all hyphens or any special characters contained in the font name.

2. Be careful, not only to change the name of the font file, but in its properties, the following:

• Fontname
• Family Name
• Name For Humans

1. The new font name has to be the same in all three fields mentioned above, including the file name.

And the bug is fixed! 😁
I hope it helps!

Anto