Unrecognized font family only with react-native run-ios

[NaumanMoazzam]

MacOS Mojave, react-native run-ios

"unrecognised font family 'font awesome'"

This issue was created before #135 . But closed. I tried every solution from there. But didn't work. Help! Cheers!

[mtahir08]

Having the same issue. Tried clearing cache, deleted node_modules, rnpm etc etc. Still having same issue!

Any solution please?

[invyctus92]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

[NaumanMoazzam]

@invyctus92 Didn't worked for me.

[colin-kudos]

@NaumanMoazzam Any solution? Having the same issue

[NaumanMoazzam]

@colin-kudos Naa! Still stuck at it. But tried to run from XCode, it works. Not with react-native run-ios.

[kgomara]

@invyctus92 - Thx, the Icon.loadFont() solution worked for me.

[liberalisman]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

-Thx, the Icon.loadFont() solution worked for me.

[JosephDunivan]

So is this Icon.loadFont(); a new requirement ?

[oblador]

No, only if you're using use_frameworks! in CocoaPods.

[mo0rti]

I have the same issue when I want to use my custom fonts on Mojave OS. I have a custom font named "helvetica-neune-medium.ttf" in my asset folder. I linked the fonts using react-native link But still encountered this error.

Unrecognised font family "helvetica-neue-medium"

"react": "16.8.3",
"react-native": "0.59.5",

[MR-Neto]

Just used Icon.loadFont() and it worked for me. I was not using CocoaPods

[miodrage]

If linking fails you might want to run this:

rn-fetch-blob will not automatically add Android permissions after 0.9.4 please run the following command if you want to add default permissions :

RNFB_ANDROID_PERMISSIONS=true react-native link

[Mohammad-Khalid23]

this worked for me I have added font from node_modules/react-native-vector-icon/Fonts instead of added complete folder

[kdnguye3]

I had to

1. react-native link react-native-vector-icons
2. add node_modules/react-native-vector-icon/Fonts to Copy Bundle Resources
3. delete other .ttfs from Copy Bundle Resources

which seemed to work for me

[nolan12345]

Option: With CocoaPods Add the following to your Podfile and run pod update:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' Edit Info.plist as described above.

If you are using use_frameworks! in your Podfile you instead need to dynamically load the icon font by doing Icon.loadFont() when boostrapping your application.

[mvarendorff]

I do not have use_frameworks! in my Podfile but use_native_modules!. It seems you have to use Icon.loadFont() as well in that case.

[rishikeshgaikar]

This issue also exists if you xcode 11 + react-native 0.60.5 and to solve this Icon.loadFont() is working. But if you are using older version of xcode 10.3 + react-native 0.60.5 this error dose not occurs.

[deftsp]

xcode 11 + "react-native": "0.61.1", no need to add Icon.loadFont().

[amazing79]

Hello! I had the same issue. The solution that I found (And worked for me) in this site : https://github.com/oblador/react-native-vector-icons#ios

The solution works better if you has installed react-native with Cocoapods. I did the following steps (for RN > 0.60):

0 - yarn add react-native-elements react-native-vector-icons 0.1 - Stop emulator and terminal :)

1- Edit Podfile file (dir: ios/podfile ) and add the this line (this need to be in the target app section)

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

If you have in this file this line 'use_frameworks!' you could comment it. If not, you need to do an additional step 2 - run cd ios/ && pod update (this made the link with RN). 3 - Find 'info.plist' file (dir: ios/app/info.plist) and add the following: <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>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> It's important that the text has to be between <dict></dict> 4 - Finally, Run the app again.

[moQuez]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

Thanks @invyctus92, this worked for me

[Andersonfrfilho]

@MortiTotti, I was having the same problem only that with the font (Rockout-vVaM.ttf=>file; Rockout =>font name in font book), I managed to solve by checking the font name in the Font Book, Ios, on android's devices we refer to the font by the file name, already in iOs should be referenced the name of the font and then returned to work.

[ravics09]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

Its worked for Me , Thanks

[RodolfoGS]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

Thank you, that works. I think that the documentation need an update.

[v3rlly]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

works fine, thanks.

[OzgunOzdemir]

Add in App.js

import Icon from 'react-native-vector-icons/MaterialIcons'

Icon.loadFont();

In your case you have to import the font awesome

Thank you, it worked for me

[AshikRoyce]

import Icon from 'react-native-vector-icons/MaterialIcons' Icon.loadFont();

I tried all these steps, but nothing works for me.

Versions i'm using

[abdulbasit1248]

import Icon from 'react-native-vector-icons/MaterialIcons' Icon.loadFont();

I tried all these steps, but nothing works for me.

Versions i'm using

Version 0.62.2 is not stable yet to have custom fonts with it. So make sure to downgrade your project first to "react": "16.9.0", "react-native": "0.61.5",

And then to add fonts again same way as you are doing.it will work

[dimameshcharakou]

Editing Info.plist file in ios directory and adding Ionicons.ttf item as it's described here: https://github.com/oblador/react-native-vector-icons#option-manually resolved the issue for me.

[azhararmar]

Hello! I had the same issue. The solution that I found (And worked for me) in this site : https://github.com/oblador/react-native-vector-icons#ios

The solution works better if you has installed react-native with Cocoapods. I did the following steps (for RN > 0.60):

0 - yarn add react-native-elements react-native-vector-icons 0.1 - Stop emulator and terminal :)

1- Edit Podfile file (dir: ios/podfile ) and add the this line (this need to be in the target app section)

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

If you have in this file this line 'use_frameworks!' you could comment it. If not, you need to do an additional step 2 - run cd ios/ && pod update (this made the link with RN). 3 - Find 'info.plist' file (dir: ios/app/info.plist) and add the following: <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>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> It's important that the text has to be between <dict></dict> 4 - Finally, Run the app again.

This worked for RN 0.62.2

[dakkafex]

2020 and we're still having this issue... neat