search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.47k stars 2.13k forks source link

Unrecognized font family only with react-native run-ios #945

Open NaumanMoazzam opened 5 years ago

NaumanMoazzam commented 5 years ago

MacOS Mojave, react-native run-ios

"unrecognised font family 'font awesome'"

image

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

mtahir08 commented 5 years ago

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

Any solution please?

invyctus92 commented 5 years ago

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 commented 5 years ago

@invyctus92 Didn't worked for me.

colin-kudos commented 5 years ago

@NaumanMoazzam Any solution? Having the same issue

NaumanMoazzam commented 5 years ago

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

kgomara commented 5 years ago

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

liberalisman commented 5 years ago

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 commented 5 years ago

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

oblador commented 5 years ago

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

mo0rti commented 5 years ago

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 commented 5 years ago

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

miodrage commented 5 years ago

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 commented 5 years ago

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

Screen Shot 2019-06-11 at 9 23 08 AM

kdnguye3 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

amazing79 commented 5 years ago

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: `

UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Foundation.ttf Ionicons.ttf MaterialIcons.ttf MaterialCommunityIcons.ttf SimpleLineIcons.ttf Octicons.ttf Zocial.ttf

It's important that the text has to be between` 4 - Finally, Run the app again.

moQuez commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago
Screenshot 2020-04-17 at 5 15 21 AM Screenshot 2020-04-17 at 5 15 34 AM

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

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

Versions i'm using

Screenshot 2020-04-17 at 5 28 43 AM
abdulbasit1248 commented 4 years ago
Screenshot 2020-04-17 at 5 15 21 AM Screenshot 2020-04-17 at 5 15 34 AM

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

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

Versions i'm using

Screenshot 2020-04-17 at 5 28 43 AM

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Gugan-raj commented 4 years ago

MacOS Mojave, react-native run-ios

"unrecognised font family 'font awesome'"

image

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

Hi this is Gugan i too faced same issue later i used showArrow={false} then it started work for me try once guys........ Thank You

TommyLeong commented 4 years ago

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

Tbh, i find this Missing/Unrecognize font issue so annoying. More like spending time on these font issue instead of my development

Anyway to others, I have to manually append the font into Xcode's Build Phases (Copy Bundle Resources). Re-deploy again from Xcode to device, then it works. Hope to help others.

SMJ93 commented 4 years ago

If you are using multi-style fonts like FontAwesome you may have to add the following to your app.js (credit to this guy):

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';

FontAwesomeIcon.getStyledIconSet('brand').loadFont();
FontAwesomeIcon.getStyledIconSet('light').loadFont();
FontAwesomeIcon.getStyledIconSet('regular').loadFont();
FontAwesomeIcon.getStyledIconSet('solid').loadFont();
prakashkrsingh0 commented 3 years ago

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 so much
but for me it is like import EyeIcon from 'react-native-vector-icons/Octicons'; EyeIcon.loadFont();

rsp8055 commented 3 years ago

@abdulbasit1248 , @AshikRoyce I faced the same font issue as well. After making some workaround I got to know that this issue was because when I downloaded this font its name was like "Muli-Light", "Muli-Black", "Muli-Bold", and etc. but then later for my convenience I renamed it as "Muli_Light" in your case you might have changed it to "MuliBold" from "Muli-Bold".

To solve this use the original font name where you are using it like:

fontFamily: "Muli-Bold" instead fontFamily: "MuliBold"

I am still looking for some efficient way to solve this instead of changing the font name throughout the app.

Hope it helps!!!

abdulbasit1248 commented 3 years ago

Thanks

On Sat, 22 May 2021 at 10:30 PM, Luan Araujo @.***> wrote:

@abdulbasit1248 https://github.com/abdulbasit1248 , @AshikRoyce https://github.com/AshikRoyce I faced the same font issue as well. After making some workaround I got to know that this issue was because when I downloaded this font its name was like "Muli-Light", "Muli-Black", "Muli-Bold", and etc. but then later for my convenience I renamed it as "Muli_Light" in your case you might have changed it to "MuliBold" from "Muli-Bold".

To solve this use the original font name where you are using it like:

fontFamily: "Muli-Bold" instead fontFamily: "MuliBold"

I am still looking for some efficient way to solve this instead of changing the font name throughout the app.

Hope it helps!!!

@rsp8055 https://github.com/rsp8055 you save my life!! I already was crying a lot here here. I tried everything that guys said above, without success. and the problem was rename... just remove the - from the name, it looks like a joke hahahaha Thank you veryyy much friend!!!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oblador/react-native-vector-icons/issues/945#issuecomment-846439832, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKOYTBNCMFOAACWK2WISEF3TO7S27ANCNFSM4GU36HAA .

luandiego7 commented 3 years ago

@abdulbasit1248 , @AshikRoyce I faced the same font issue as well. After making some workaround I got to know that this issue was because when I downloaded this font its name was like "Muli-Light", "Muli-Black", "Muli-Bold", and etc. but then later for my convenience I renamed it as "Muli_Light" in your case you might have changed it to "MuliBold" from "Muli-Bold".

To solve this use the original font name where you are using it like:

fontFamily: "Muli-Bold" instead fontFamily: "MuliBold"

I am still looking for some efficient way to solve this instead of changing the font name throughout the app.

Hope it helps!!!

@rsp8055 you save my life!! I already was crying a lot here here. I tried everything that guys said above, without success. and the problem was rename... just remove the - from the name, it looks like a joke hahahaha Thank you veryyy much friend!!!

nadilas commented 3 years ago

This is surreal... does anybody have a working solution? After two days of trying all these "works for me"s .... still looking at "unrecognized font family 'Material Design Icons'" 🤯

hafizbhuyan commented 3 years ago

Add in App.js

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

Icon.loadFont();

In your case you have to import the font awesome

This worked for me. Using React Native version 0.66.0 in Oct 2021. Thanks!

igorjos commented 2 years ago

I can confirm, the issue is resolved only with Icon.loadFont(); I've tried everything removing fonts, re-installing pods etc.

"@react-navigation/native": "^6.0.8", "@react-navigation/native-stack": "^6.5.0", "react": "17.0.2", "react-native": "0.67.2", "react-native-app-intro-slider": "^4.0.4", "react-native-dropdown-picker": "^5.2.3", "react-native-material-textfield": "^0.16.1", "react-native-paper": "^4.11.1", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.11.1", "react-native-snap-carousel": "^3.9.1", "react-native-splash-screen": "^3.3.0", "react-native-vector-icons": "^9.0.0"

sarliram commented 2 years ago

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 this works for me

liquidvisual commented 2 years ago

^ didn't expect the above to work, but so glad it did. Thanks!

Y-k-Y commented 2 years ago

In 2022 still had the same issue... in my case the font name was wrong. Changing font name FontAwesome5_Solid.ttf -> FontAwesome5Free-Solid.ttf resolved my problem. By the way without changing font name works perfect on Android. Why?

Guang1234567 commented 2 years ago

In 2022 still had the same issue... in my case the font name was wrong. Changing font name FontAwesome5_Solid.ttf -> FontAwesome5Free-Solid.ttf resolved my problem. By the way without changing font name works perfect on Android. Why?

maybe flutter... haha.

Guang1234567 commented 2 years ago

In 2022-07-08 react-native v0.68

Only need to modify the plist.info like below:

123

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>TemplateTypeScriptReactNativeApp</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
  <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>MaterialCommunityIcons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Zocial.ttf</string>
    </array>
</dict>
</plist>
Guang1234567 commented 2 years ago

And you don't need to copy bundle resource anymore.

66645

The below snapshot copy ttf resource script is auto generated during the pod install, and it read the rules from the below code:

https://github.com/oblador/react-native-vector-icons/blob/2b5bc0527c751b57dca1fc0f8c6c8016f70142fd/RNVectorIcons.podspec#L15

999

algarcia-vector commented 2 years ago

I fix this issue by double checking info.plist and modified the following array directly in visual studio code:

`

UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Foundation.ttf Ionicons.ttf MaterialIcons.ttf MaterialCommunityIcons.ttf SimpleLineIcons.ttf Octicons.ttf Zocial.ttf Fontisto.ttf

`

MortezaNajafian commented 2 years ago

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

Thanks a lot. this way work for me.

wahajzafar060692 commented 1 year ago

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

Icon.loadFont();

Where did you update this code because I am facing this issue only in IOS build

KrisLau commented 1 year ago

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

@oblador Is this still an issue with the linking of the fonts with use_frameworks!?

I had this issue before adding use_frameworks!and still now after adding use_frameworks!. It's weird because I dont use the .loadFont() at all but when I add all the fonts through Copy Bundle Resources, it works for local builds but will cause duplicate resource errors for when I deploy with Fastlane.

So I've been adding fonts through Copy Bundle Resources while developing locally and remove it before deploying. Is there another method available?