CODEWITHSUNDEEP
react-native
valerybodak
valerybodak

Reputation: 4413

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".

enter image description here

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?

Upvotes: 104

Views: 179622

Answers (30)

Fazliddin
Fazliddin

Reputation: 11

I encountered a similar issue with react-native-vector-icons where it displayed a box with a question mark. Fortunately, I resolved the problem by navigating to the ios/{project_name/Info.plist file and adding the following lines inside the <array>:

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

Additionally, I created a Fonts folder within the ios directory and placed the corresponding TTF files in it. After doing this, make sure to rebuild, close Xcode, and remove the build folder from the ios directory in Visual Studio Code or any other IDE. Open Xcode again, rebuild the project, and this should solve the issue. Now you can use icons in your code like this:

import FeatherIcon from "react-native-vector-icons/Feather";

<FeatherIcon size={24} color={colors.text} name={'box'}/>

Upvotes: 0

Elisei Nicolae
Elisei Nicolae

Reputation: 352

In my case, I've added the fonts in the following way, and it is working.

react-native.config.js

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

My fonts are located in ./src/assets/fonts and I've the following fonts: Urbanist-Bold, Urbanist-ExtraBold, Urbanist-Light

My info.plist is looking like this:

    <key>UIAppFonts</key>
    <array>
        <string>Urbanist-Bold.ttf</string>
        <string>Urbanist-ExtraBold.ttf</string>
        <string>Urbanist-Light.ttf</string>
    </array>

Upvotes: 0

Muhammad Haidar
Muhammad Haidar

Reputation: 2037

Follow these steps to solve this issue on the ios build:

1- First install the Font on your Mac.

2- Check "My Fonts" in FontBook to make sure the Font is installed.

enter image description here

3- Now Press CMD+I to see the Font Postscript name. This should be the 
name of your Font file in your Project.

For example: I was using a font named "Nazegul" and I was getting the 
same error because I had saved the font file name in my project with 
"Nazegul-Regular.ttf" but when I checked this font Postscript name it 
was "NazegulRegular" and after changing the font name to Postscript 
name, the error was gone.

Upvotes: 2

Lucas Andrade
Lucas Andrade

Reputation: 4610

You probably need to link your fonts. In the root of the project, create a file: react-native.config.js Considering that your fonts are placed at PROJECT_NAME/assets/fonts add this to the new config file:

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

Now just link them:

npx react-native link

or for react-native + 0.69

npx react-native-asset

After this, your fonts should be already added in the android/app/src/main/assets/fonts directory and in Info.plist for IOS.

Credits to this blog post.

Upvotes: 6

Harsh Kukarwadiya
Harsh Kukarwadiya

Reputation: 518

Put the following code in didFinishLaunchingWithOptions in AppDelegate.m in your iOS folder.

NSArray *fontFamilyNames = [UIFont familyNames];
for (NSString *familyName in fontFamilyNames) {
    NSLog(@"Font Family Name = %@", familyName);
    NSArray *names = [UIFont fontNamesForFamilyName:familyName];
    NSLog(@"Font Names = %@", names);
}

It's going to list out all the Font-families available in your iOS app.

After that just search for your font-family in your case LinBiolinum_R.

After that copy the name and make a condition in your font file like this

Platform.OS === "ios" ? "Listed in Console" : "Normal Font family"

Remove the script from AppDelegate.m afterwards.

Upvotes: 1

Wietse Venema
Wietse Venema

Reputation: 2764

On Android it takes the name of the file and you are done. On iOS however it is a bit more complex.

There are a few steps you should take:

  • Double check the font files are included in the Target in XCode
  • Make sure they are included in the step "Copy Bundle Resources" (add files, not folders)
  • Include them in the Info.plist of the app
  • Find the name of the Font through FontBook or with some log statements in your AppDelegate

Explained in more detail here: http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

Upvotes: 165

Ali Abbas
Ali Abbas

Reputation: 721

  1. Add the Font in "Copy Bundle Resources" under "Build Phases"
  2. Add the Font in Info.plist file
  3. If you have added the name of the font AvenirMedium, it wont work, you need to use Avenir-Medium then it will work in iOS.

Clean previous build and start a fresh one.

Upvotes: 2

Adi Dasler
Adi Dasler

Reputation: 538

I followed all pieces of advise, but the problem was that I wrote

'./assets/fonts'

instead of

'./src/assets/fonts'.

Don't forget rebuild your app after 'yarn react-native link'. Good luck!

Upvotes: 0

VICTOR KIMBI DUBE
VICTOR KIMBI DUBE

Reputation: 21

I had the same error about Inter-Regular font not being recognised.

  1. The first thing I did was downloading the google fonts https://fonts.google.com/specimen/Inter and find the ttf file for the font missing.

  2. Then drag the font file to the src/assets/fonts.

  3. Open xcode, click projects name and under build phases you have to locate the font file under Copy Bundle Resource (click the + below the existing list).

  4. Add Inter-Regular.ttf under UIAppFonts on your infor.plist file.

  5. rm -rf node_modules; watchman watch-del-all; rm -rf /tmp/metro-*; yarn install; npx pod-install || cd ios && pod install; cd ..; react-native start --reset-cache, 4. re-run simulator

Upvotes: 2

Berk Kanburlar
Berk Kanburlar

Reputation: 270

  1. if there is no assets and font directories create them !
  2. add your fonts to assets/font/ which you created
  3. add your root directory react-native.config.js file
  4. change react-native.config.js file to this;
module.exports = {
    assets: ['./assets/fonts']
}
  1. Link your fonts and assets to react-native so run this command

npx react-native link

  1. 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

  1. 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 !

Upvotes: 3

Iqbal
Iqbal

Reputation: 31

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

Upvotes: 3

jeany
jeany

Reputation: 107

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

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

Upvotes: 7

pravchuk
pravchuk

Reputation: 981

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.

Upvotes: 1

Eden Katabi
Eden Katabi

Reputation: 301

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 */,

Upvotes: 2

Arosha
Arosha

Reputation: 1401

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>

Upvotes: 31

Ahmad H. Ibrahim
Ahmad H. Ibrahim

Reputation: 1079

  1. If you have custom fonts that you downloaded from internet, place them, e.g in src/assets/fonts folder.

  2. 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'], };

  3. Link your fonts assets by running npx react-native link in the terminal

Upvotes: 7

Akash Agarwal
Akash Agarwal

Reputation: 406

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. Look at the postscript name

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.

Upvotes: 28

AN63L
AN63L

Reputation: 81

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

Upvotes: 3

Yavor Daskalov
Yavor Daskalov

Reputation: 47

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.

Upvotes: 0

Kaey
Kaey

Reputation: 4655

Easy solution. Stop worrying

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

Then add it your Bundle resources

Upvotes: 3

George T Kurian
George T Kurian

Reputation: 303

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:

exact name.

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

Upvotes: 1

Anayo Oleru
Anayo Oleru

Reputation: 516

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

Upvotes: 1

miqrc
miqrc

Reputation: 2384

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>
...

Upvotes: 1

Aaron Zack
Aaron Zack

Reputation: 9

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

Upvotes: -1

Jacob Lukose
Jacob Lukose

Reputation: 181

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.

Upvotes: 0

JAK
JAK

Reputation: 6491

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"

Upvotes: 31

dcr24
dcr24

Reputation: 394

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.

Upvotes: 0

Thien Nguyen Ho
Thien Nguyen Ho

Reputation: 83

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

Upvotes: 4

Thai Ha
Thai Ha

Reputation: 1379

Add this to your package.json

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

and then run react-native link in command line

Upvotes: 10

Sami
Sami

Reputation: 425

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

Upvotes: 14

Related Questions