'Unrecognized font family on iOS simulator with React Native

I've added Linux Biolinum fonts (http://www.dafont.com/linux-biolinum.font, LinBiolinum_R.ttf, LinBiolinum_RB.ttf) to my React Native project. Android version is OK. But on iOS I always see error "Unrecognized font family LinBiolinum_R".

My style is:

customFontRegular: {
    fontFamily: 'LinBiolinum_R',
},

I've tryied to rename font file and font family to "MyFont", but the error appears again on iOS.

Any ideas?

react-native

Solution 1:^[1]

Implement the following code in your appdelegate file

for (NSString* family in [UIFont familyNames])
{
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"Family name:  %@", name);
    }
}

You should use FONT FAMILY NAME instead of your font file name like the following

fontFamily: "FuturaBT-Book"

Solution 2:^[2]

Easy/Working solution 2021. React Native 0.64. XCode 12+

Add these lines in ios/<ProjectName>/Info.plist. Rebuild ios app. that's it!

<key>UIAppFonts</key>
    <array>
      <string>AntDesign.ttf</string>
      <string>Entypo.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>Feather.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>FontAwesome5_Brands.ttf</string>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>Fontisto.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
    </array>

Solution 3:^[3]

For people who have tried everything and are still facing this issue, this is a problem with the font's file naming, You need to rename all of the fonts file name to its postscript name. On mac I can open the font using fontbook and find this out.

Once I renamed all the fonts name to their postscript name the error was gone and I was also able to use the font-weight css property to set the font weight.

Solution 4:^[4]

For me, changing the name of the file to the name of the Font (displayed as I open the file) did it.

Solution 5:^[5]

Add this to your package.json

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

and then run react-native link in command line

Solution 6:^[6]

If you have custom fonts that you downloaded from internet, place them, e.g in src/assets/fonts folder.
Create a file that is called react-native.config.js in the root folder and write the following in it:
- module.exports = { assets: ['./src/assets/fonts'], };
Link your fonts assets by running npx react-native link in the terminal

Solution 7:^[7]

Just do these 5 steps. It saves my life. ^.^

Add folder fonts include your fonts (path: src/assets/fonts)
Paste this code in file package.json => "rnpm": { "assets": [ "./assets/fonts/" ] }
Run cmd react-native link
Open Xcode select Target -> Build Phases tab -> Copy Bundle Resources and add your font
Rebuild app Open Xcode build or run cmd react-native run-ios

Solution 8:^[8]

For IOS,

Make sure you add fonts to resource Copy Bundle Resources
Make sure you have folder Resources in Xcode, somehow it was deleted and you must create, import fonts to that folder manually
Make sure using name of Family in Font book

Solution 9:^[9]

if there is no assets and font directories create them !
add your fonts to assets/font/ which you created
add your root directory react-native.config.js file
change react-native.config.js file to this;

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

Link your fonts and assets to react-native so run this command

npx react-native link

Use your fonts where you want so change your stylesheet like;

fontFamily: 'texgyreadventor-regular'

be carefull ! if your font have not bold version than remove

fontWeight: 'bold'

from your stylesheet class

remove your app in simulator or in your physical device. Than re-build it. Because you have to re-build your app not refreshing it to see new fonts !

Solution 10:^[10]

I had the same issue and although the responses here are correct, I figured I'd try to give my own version for those who are still confused after reading the posts above :)

I followed this article to add my custom fonts to the XCode project :

You don't actually have to open XCode to add fonts for iOS. I used VSCode for example.

Here are the steps:

Go to node_modules>react-native-vector-icons>Fonts
You will have to search for it, modules aren't ordered alphabetically
Copy all the fonts available
Go to your ios folder and create a new folder called "Fonts"
Watch out ! The naming is case-sensitive, make sure you use a capital "F" (I didn't and spent too much time figuring out where I went wrong)
Paste de fonts you copied before in your Fonts folder
Next open your info.plist file (It's located in ios>Your_Project_Name>info.plist)
For each new font you added in the Fonts folder, add a line such as the one below, under the key UIAppFonts

The final result should look something like this:

<key>UIAppFonts</key>
     <array>
        <string>font1.ttf</string>
        <string>font1.ttf</string>
        <string>[Add your font names here]</string>
    </array>

Finally close the iOS simulator, run pod install in the ios folder and run npm install in your root (for good measure) and then you can run react-native run-ios again.

If you're using a recent version of React-Native do not use react-native link command as you will encounter duplicate errors

Solution 11:^[11]

2021 answer with "react-native": "0.65.1", "react-native-vector-icons": "8.1.0"

Running react native often doesn't work. it create a duplicate resource declaration and you need to delete the extra lines. Plus, when you run react-native link manually, it will fix your android but when you run your ios, the build will say you need to unlink it, we will fix this as well.

run:

react-native link react-native-vector-icons

go to your ios->Podfile

delete this line (fix the unlink issue):

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

go to ios->YOUR_PROJECT.xcodeproj->project.pbxproj

and delete these lines in the "PBXResourcesBuildPhase" section:

            939BE13DDBD94B1FA64AA9EC /* AntDesign.ttf in Resources */,
            E863EAC557374C78B1C1A44F /* Entypo.ttf in Resources */,
            AA1DC0C0FC504FF98744B883 /* EvilIcons.ttf in Resources */,
            76E382E015E1470A9FDE5E08 /* Feather.ttf in Resources */,
            99E9B4823AAE456C89BF6DAF /* FontAwesome.ttf in Resources */,
            BCE22C5804AD4EC988CB4AD6 /* FontAwesome5_Brands.ttf in Resources */,
            FE4AA6C0F54D4A26A2088CDA /* FontAwesome5_Regular.ttf in Resources */,
            096B6D92BD5F4B59A1D262BE /* FontAwesome5_Solid.ttf in Resources */,
            1031EC31F55B40378CAD9D3D /* Fontisto.ttf in Resources */,
            2815970EABC94327BA107658 /* Foundation.ttf in Resources */,
            3CB0C5395AE44CEAB966AE51 /* Ionicons.ttf in Resources */,
            76E538C39D604AC4A0EAE522 /* MaterialCommunityIcons.ttf in Resources */,
            AC62C33B70D04559AC57B231 /* MaterialIcons.ttf in Resources */,
            49299510939246209A803546 /* Octicons.ttf in Resources */,
            6AF5C757975E45839F276B17 /* SimpleLineIcons.ttf in Resources */,
            45F326492D5E453E99A6EEAA /* Zocial.ttf in Resources */,

Solution 12:^[12]

In my case the name of the ttf file was wrong. I had to edit ios/MyApp/Info.plist and change manually the filename of the font.

From:

...
<array>
  <string>Roboto_medium.ttf</string>
...

To:

...
<array>
  <string>Roboto-Medium.ttf</string>
...

Solution 13:^[13]

You can also try this, specify your fonts this way, map them into three styles:

For instance Gilroy-SemiBoldItalic

// iOS
{
  fontFamily: 'Gilroy',
  fontWeight: '600',
  fontStyle: 'italic'
}

// Android
{
  fontFamily: 'Gilroy-SemiBoldItalic'
}

You can also create a function to generate styles for a font with given weight and style.

Hope this helps

Solution 14:^[14]

In my case, it worked fine in Android but not in iOS. The font file name was PlayfairDisplay-VariableFont_wght.ttf. But when I opened that file I saw the name as:

So, I changed the file name to PlayfairDisplay-Regular.ttf and it worked pretty well!

Solution 15:^[15]

For me the fix was that I forgot to add the target for the font. If you don't add target for the font it won't work.

Solution 16:^[16]

I fix by changing font file name into Futura-Medium, if I use FuturaMedium it will error like above

Solution 17:^[17]

I renamed the font files and re-ran react-native link and ended up in this state.

I resolved it by ensuring the old fonts were removed from the Resources folder and Info.plist and then ran the build again.

Solution 18:^[18]

If you are running react-native ios simulator, you should include fonts in the xcode project directory.

react-native link react-native-vector-icons doing so , will add the fonts to Resources folder in xcode project and also add fonts to pinfo list.

Solution 19:^[19]

Easy solution. Stop worrying

Add it in to your project, Then add it your Bundle resources

Solution 20:^[20]

I had the same problem. I checked if I've added the fonts correctly to the xcode project. Then I checked the info.plist.

Turned out I spelled the name wrong. Instead of FontAwesome5_Solid.ttf, I had written FontAwesoem5_Solid.ttf. So I fixed it. That solved the problem for me.

To sum up - be very careful when typing the names and when checking them.

Solution 21:^[21]

I had the same issue and fixed it by just opening the project in Xcode and under Resources folder in Project Navigator, there were duplicate fonts and just removing them from Resources folder and Info.plist both, the issue got resolved. Just run the app in Xcode after deletion then you may verify in your other tools as well without reinstalling npm. Just run 'react-native run-ios', cheers :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	IKKA
Solution 2	Arosha
Solution 3	Dharman
Solution 4	Sami
Solution 5	Azsgy
Solution 6	Ahmad hassan
Solution 7	Pooya Sabramooz
Solution 8	Thien Nguyen Ho
Solution 9	Berk Kanburlar
Solution 10	Jarred
Solution 11	Eden Katabi
Solution 12	miqrc
Solution 13	Anayo Oleru
Solution 14	George T Kurian
Solution 15	pravchuk
Solution 16	Iqbal
Solution 17	dcr24
Solution 18	Jacob Lukose
Solution 19	Kaey
Solution 20	Dharman
Solution 21	Aaron Zack

'Unrecognized font family on iOS simulator with React Native

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]