CODEWITHSUNDEEP
iosxcodereact-nativefontsreact-native-ios
Xenomy
Xenomy

Reputation: 43

React-native unrecognized font family error

I wanted to use a custom font in my react-native project, but I got an error on ios simulator How can I solve it
I tried every way but I couldn't find a solution.

Unrecognized Font Family: sfproregular

Error: Error Screenshot

Project Structure: Project structure screenshot

react-native.config.js

module.exports = {
    project: {
      ios: {},
      android: {}, // grouped into "project"
    },
    assets: ["./assets/fonts/"], // stays the same
  };

versions

 "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-phone-input": "^0.2.4",
    "react-navigation": "^4.4.0"

I wanted to use the font in "Welcome.js"

Welcome.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  StatusBar,
  TouchableOpacity,
  Button,
  ImageBackground,
} from 'react-native';

import Logo from '../components/WelcomeLogo';

import arkaplan from '../assets/images/arkaplan.png';


export default class Welcome extends React.Component {

  render() {

  return (
    <>
    <ImageBackground source={arkaplan}  style={styles.constrain} >
    <StatusBar barStyle="light-content"/>
    <Logo />

    
    <Text style={styles.welcome} >Welcome!</Text>


    </View>
    </>
  )
  
  }
};
 

const styles = StyleSheet.create({

  constrain: {
    flex: 1, 
    alignItems:'center', 
    justifyContent:'center',
    

  welcome: {
    fontSize: 50,
    color: 'white',
    fontFamily: 'sfprogregular',
    marginTop: 20,
    marginBottom: 5,
  },

});

Upvotes: 4

Views: 6812

Answers (3)

Md. Robi Ullah
Md. Robi Ullah

Reputation: 2172

Sometimes your font name is not the same for Android and iOS (since iOS uses postscript name as fontFamily). In most cases, in android, the font is the same as the file, for example, I had this problem when using HelveticaNeueLTPro-BdEx font in iOS.

I am sharing the fix that helps me out.

  1. Run npx react-native link. Maybe you already did.
  2. Add this inside the didFinishLaunchingWithOptions method on your AppDelegate.m:
for (NSString *familyName in [UIFont familyNames]){
  NSLog(@"Family name: %@", familyName);
    for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]) {
      NSLog(@"--Font name: %@", fontName);
    }
}
  1. Then, when you launch your app with xcode, you will be able to see all the fonts installed on your app, so you just have to use it the way it is listed on your console:

enter image description here

  1. You can add fontFamily based on OS like:
Platform.OS == 'android' ? 'Linotype - HelveticaNeueLTPro-BlkEx' : 'HelveticaNeueLTPro-BlkEx'

Or you can rename the font file name and then run npx react-native link again and also maybe have to delete the previous UIAppFonts entry for the previously linked font in Info.plist file.

Upvotes: 1

Yusuf Ismail
Yusuf Ismail

Reputation: 1351

Much like you I experienced this Unrecognized Font family issue when running the iOS build via Terminal. For whatever reason, it doesn't effect the final archive build or if one runs the build via Xcode. This is on the latest RN 0.63.3 in macOS Catalina 10.15.7 with Xcode 12.0.1.

The issue was with the font name itself.

Solution Summary

In your case, I recommend the following steps to take.

  1. Install your font sfprogregular on your macOS system
  2. With the font installed, and selected in Font Book press CMD+I to see postscript name
  3. Rename the font files in your project to their respective PostScript names
  4. Run npx react-native link in your project to setup the renamed fonts
  5. Do cleanup of the older font files prior to the rename (remove old fonts)
  6. Change the name of the font to the postscript name in code when referring to the font in styles

My experience detailed

In my case, we are using TradeGothic.

Initially, when we linked the font, the name of the font file itself was: Trade Gothic LT.ttf

Android is fine with this, but not iOS. That's because Android relies on the filename, but iOS depends on the PostScript name of the font.

To fix this, I renamed the ttf file to it's postscript name TradeGothicLT.ttf. For the bold one which was Trade Gothic LT Bold.ttf I renamed it to TradeGothicLT-Bold.ttf.

I then did npx react-native link inside my project to connect my newly renamed fonts. Then, I cleaned up by removing the older .ttf files from the XCode project under resources (just press delete on each of the red font files that are no longer there) and removed the font files from the older Android link process in the folder /android/app/src/main/assets/fonts/. In the info.plist file, under the section UIAppFonts remove the older font filenames.

Finally in code, instead of referring to 'Trade Gothic LT' we now refer to it as 'TradeGothicLT'. That's it, it works now!

You can find the postscript name of the font by installing the .ttf file (double click it) on macOS and in Font Book with the font selected press CMD+I to get information about the font.

NOTE: It's not necessary to install the font to macOS, it's just the only way I know of to get the PostScript name. If you already have the PostScript name of the fonts, you don't need to install them.

I hope this helps you and others that might stumble upon this issue!

Upvotes: 8

Kushal Desai
Kushal Desai

Reputation: 127

After adding the custom fonts, you need to link it using react-native link. That will create an entry in Info.plist file (iOS) & android/src/main/assets/fonts/ directory (Android).

If the above command fails, you need to add those fonts manually in the android directory & plist file.

Upvotes: 0

Related Questions