Unrecognized font family on iOS simulator with React Native

Question

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?

Double check you are not using the font file name. Instead double tap the font file and font family name will be the title of your widow, use that. — Muhammad Bilal ahmad, Aug 22 '22 at 06:56

score 160 · Accepted Answer · edited Dec 26 '22 at 23:29

160

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/

edited Dec 26 '22 at 23:29

starball

20,030
7
43
238

answered Feb 23 '17 at 08:52

Wietse Venema

2,684
1
19
18

13

yes, I had similar problem was that the android uses name of the file but IOS uses "actual name" of the font (that can be different from the file name). – sodik Feb 23 '17 at 08:56
2

I've accepted the answer. I've checked name of fonts in the logs. Name of fonts should be LinBiolinum and LinBiolinumB. Thank you. – valerybodak Feb 23 '17 at 08:59
The above solution working for many fontFamily in my app, but in my case it showing error for a particular fontFamily. So weird. Kindly let me know any other method to know about the issue. I have done above steps. – sejn Aug 01 '18 at 06:25
Saved a lot of time, thank you so much. :) Is there a way to rename the "actual name" of the font? – Subhendu Kundu Feb 21 '19 at 18:34
You must add individual fonts into the copy bundle resources list, and cannot add a fonts folder to it. I tried, and it failed to find the font. – Ben Butterworth Jan 11 '20 at 11:50
multi target should check your target – Tuan Nguyen Feb 24 '20 at 15:28
1

Adding to Build Phases and + item to Copy Bundle Resources saved me. Thanks! – Dazzle Apr 25 '20 at 18:45
I tried to use viewDidLoad from the referenced article in react-native, but... I am not sure where to import UIFont from... – Yossi Apr 29 '20 at 16:40
I had the naming issue and solved it by using the fullname of the font.ttf file by right clicking on it then get info – Mehdi Faraji Nov 28 '21 at 17:02
Great answer. Sorted out my similar font-based problem straightaway. – Andy Duncan Mar 09 '22 at 11:13
https://gist.github.com/jpavley/6567674 this is how you log the fonts from the last point – Stanislau Buzunko Jan 05 '23 at 22:45
In my case, I changed my target font location from "relative to path" -> "relative to group" and it works – petrov Feb 08 '23 at 15:01

score 31 · Answer 2 · answered Sep 11 '18 at 05:15

31

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"

answered Sep 11 '18 at 05:15

IKKA

6,297
7
50
88

3

This worked for me! I put it in the AppDeletegate.M file inside the didFinishLaunchingWithOptions, right before the return. You can see the logs in Xcode. – davedeecoder Mar 12 '21 at 16:12
Where in Appdelegate? – Zeeshan Ahmad Khalil Jul 27 '21 at 10:42
this done not print Poppins family expcept this all are working – Engr.Aftab Ufaq Apr 14 '22 at 11:59
It helped me, I used a font file name, but inside TTF the name was different, without dashes. Thank you! – Tadas Stra Aug 11 '23 at 06:52

score 31 · Answer 3 · answered Jun 13 '21 at 06:11

31

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>

answered Jun 13 '21 at 06:11

Arosha

1,311
2
16
22

6

If only it were that simple. – JCraine Mar 16 '22 at 02:42
3

After adding this, be sure to 1. delete from simulator, 2. stop metro, 3. run something like: `rm -rf node_modules; watchman watch-del-all; rm -rf /tmp/metro-*; yarn install; cd ios; pod install; cd ..; react-native start --reset-cache`, 4. re-run simulator – Christopher Chalfant Mar 17 '22 at 03:30
That didn't work for me. Probably the answer is not clear enough. Please say where we add your code, at the end or in between etc – William Apr 02 '22 at 05:58
@William at the end is fine but before – s.bridges Apr 26 '22 at 19:52

score 26 · Answer 4 · edited Apr 19 '21 at 04:55

26

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.

edited Apr 19 '21 at 04:55

Dharman

30,962
25
85
135

answered Apr 19 '21 at 04:50

Akash Agarwal

384
3
3

You just saved my night, man. I never would have imagined this. – Marvelous Ikechi Oct 16 '21 at 20:55
for Poppins its not working – Engr.Aftab Ufaq Apr 14 '22 at 11:57
This was it!! I was trying Open Sans Condesed font. It worked fine on android, but wasn't on iOS simulator. The actual file name which I donwloaded was "OpenSans_Condensed-Bold.ttf", which wasn't working. But after I installed that font on mac system and went to FontBook, as mentioned in this answer, I saw that the 'PostScript Name' was "OpenSansCondensed-Bold". Hence, just renamed the font file name to "OpenSansCondensed-Bold" from "OpenSans_Condensed-Bold.ttf", ran `npx react-native-asset`, rebuilt the app and it worked both in ios and android this time. Thank you. – Deepak Apr 24 '23 at 07:30

score 14 · Answer 5 · answered Jan 11 '18 at 11:17

14

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

answered Jan 11 '18 at 11:17

Sami

295
2
6
10

3

This worked for me as well, even if my font had a space in its name (which I thought would be problematic), it actually did not matter. – Karim Kouznetsov Jan 15 '18 at 17:18
3

This was it for us also. ICOMOON had a setting to give the font a name. It was different than what I gave the file name and the json data name. I'm amazed that this mattered. If anyone else it experiencing this, make sure to set the font name BEFORE downloading the font package from icomoon or any other font creation software. – SamWise Jun 26 '18 at 03:56

score 10 · Answer 6 · edited Apr 13 '18 at 20:50

10

Add this to your package.json

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

and then run react-native link in command line

edited Apr 13 '18 at 20:50

Azsgy

3,139
2
29
40

answered Apr 13 '18 at 20:08

Thai Ha

1,331
14
21

4

correct, but deprecated. see https://github.com/react-native-community/cli/blob/master/docs/configuration.md – E.A.T Aug 02 '19 at 03:31
Umm, ok @E.A.T, then what is the replacement method that accomplishes the same thing as `react-native-link` with an `rnpm` section? – David V McKay Aug 06 '19 at 16:55
1

the link i added offers instructions. in short, this is moved to `react-native.config.js` – E.A.T Aug 06 '19 at 17:01

score 7 · Answer 7 · answered Jun 04 '21 at 05:12

7

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

answered Jun 04 '21 at 05:12

Ahmad hassan

1,039
7
13

This is what worked for me, I forgot to `npx react-native link`. – Alaa Salah Apr 26 '22 at 07:32

score 6 · Answer 8 · edited Nov 11 '21 at 17:58

6

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

edited Nov 11 '21 at 17:58

Pooya Sabramooz

312
2
17

answered Mar 18 '21 at 04:10

jeany

89
1
3

score 3 · Answer 9 · answered Apr 21 '18 at 18:08

3

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

answered Apr 21 '18 at 18:08

Thien Nguyen Ho

73
1
7

score 3 · Answer 10 · answered Dec 23 '21 at 02:33

3

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

answered Dec 23 '21 at 02:33

Iqbal

31
5

score 3 · Answer 11 · answered Jan 24 '22 at 13:52

3

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 !

answered Jan 24 '22 at 13:52

Berk Kanburlar

260
2
11

3

This did work for me once - on a clean RN install. But god help you if you're dealing with this further down the road. IOS is a ripe piece of shit that fails everytime you look at it. – JCraine Mar 16 '22 at 02:38
Yes bro... you are right – Berk Kanburlar May 23 '22 at 12:43
You have a typo in step 2. It is plural fonts - not singular. – Walter Monecke Dec 26 '22 at 20:18

score 3 · Answer 12 · answered Jan 18 '23 at 03:57

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.

score 2 · Answer 13 · answered Jul 26 '20 at 14:41

2

Easy solution. Stop worrying

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

answered Jul 26 '20 at 14:41

Kaey

4,615
1
14
18

Note to self: when I added my custom fonts to this, I chose from the Resources folder (where they already were) so they wouldn't clutter up the left sidebar. – JCraine Apr 25 '22 at 02:18

score 2 · Answer 14 · answered Dec 23 '20 at 17:32

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

It's better to have the content of the resource in the answer rather than a link, because that will stay over time whereas a link to an external resource may not. — AlBlue, Dec 23 '20 at 19:46

score 2 · Answer 15 · answered Sep 12 '21 at 08:32

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

This still works in 2022 with "react-native": "0.68.0", "react-native-vector-icons": "9.1.0". Thank you! — gezquinndesign, May 31 '22 at 13:50

score 2 · Answer 16 · answered Jun 21 '22 at 07:36

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

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.
Then drag the font file to the src/assets/fonts.
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).
Add Inter-Regular.ttf under UIAppFonts on your infor.plist file.
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

solved my issue. using RN@0.70 – mdehghani Sep 08 '22 at 16:09 — mdehghani, Sep 08 '22 at 16:09

score 2 · Answer 17 · answered Sep 19 '22 at 13:39

Add the Font in "Copy Bundle Resources" under "Build Phases"
Add the Font in Info.plist file
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.

score 1 · Answer 18 · answered Dec 02 '19 at 17:48

1

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

answered Dec 02 '19 at 17:48

miqrc

1,964
2
18
24

score 1 · Answer 19 · answered Mar 10 '20 at 18:10

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

score 1 · Answer 20 · answered Jun 03 '20 at 03:29

1

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!

answered Jun 03 '20 at 03:29

George T Kurian

183
2
12

score 1 · Answer 21 · answered Nov 03 '21 at 12:26

1

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.

answered Nov 03 '21 at 12:26

pravchuk

903
10
14

this. Also, you can find the checkbox for the target when you select the font under the `Fonts/` directory in Xcode. The panel shows up on the right side of the window. You want to check your app name under "Target Membership". – Tycholiz Apr 23 '22 at 19:11

score 1 · Answer 22 · edited Jan 06 '23 at 06:58

1

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.

edited Jan 06 '23 at 06:58

Stanislau Buzunko

1,630
1
15
27

answered Oct 21 '22 at 05:37

Harsh Kukarwadiya

423
1
3
12

Use of undeclared identifier 'fontFamilies' – Stanislau Buzunko Jan 05 '23 at 22:01
here is a gist how to log properly https://gist.github.com/jpavley/6567674 – Stanislau Buzunko Jan 05 '23 at 22:45

score 1 · Answer 23 · answered Jan 24 '23 at 19:42

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.

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.

score 0 · Answer 24 · answered May 22 '18 at 21:49

0

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.

answered May 22 '18 at 21:49

dcr24

374
1
5
11

score 0 · Answer 25 · answered Oct 07 '18 at 08:19

0

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.

answered Oct 07 '18 at 08:19

Jacob Lukose

181
1
4

score 0 · Answer 26 · edited Oct 21 '20 at 07:00

0

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.

edited Oct 21 '20 at 07:00

Dharman

30,962
25
85
135

answered Oct 21 '20 at 06:55

Yavor Daskalov

29
5

score 0 · Answer 27 · answered Jun 25 '22 at 16:10

0

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!

answered Jun 25 '22 at 16:10

Adi Dasler

319
4
10

score 0 · Answer 28 · answered May 25 '23 at 08:09

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>

score -1 · Answer 29 · answered Dec 06 '18 at 04:59

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

Unrecognized font family on iOS simulator with React Native

29 Answers29

Linked