fontFamily unrecognized in react native ios app

Question

I'm struggling to get my font, PressStart2P, loaded on. Its a font from google fonts. . . Have gone through the following steps, multiple times, to make sure I wasnt sloppy. By all indications, the font should be available in the react native app.

1. created the assets folder at the root of my project directory
2. create the fonts folder within the assets folder and place the font files inside... exactly as the PostScript name indicates, and have used both .otf and .ttf versions of the font.
3. in package.json, specified where the custom fonts are located:

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

4. in my terminal, entered npx react-native link
5. added my fonts in App.js

For reference, here is the entire App.js file:

import React, { Component } from 'react';
import { Text, View , TouchableOpacity} from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ backgroundColor:'#e9ffc945',flex: 1,
       justifyContent: "center", alignItems: "center" }}>
        <Text style={{fontSize:26, color: "#85321b45",
        fontFamily: "PressStart2P"}}>Allah'u'Abha :)</Text>
        <TouchableOpacity
          style={{
            backgroundColor:'#a4a6fc19',
            padding: 95,
            borderRadius: 19,

          }}
        >
         <Text
           style={{
             color: "white",
             fontSize: 20
           }}
         >
           </Text>
         </TouchableOpacity>
      </View>
    );
  }
}

Additionally, I've checked in my copy bundle resources, in my project target in xcode... the file is there. Any ideas out there ?

Answer 1

I think you are using Font Family name which is not recognized with iOS. Instead of Font Family name, you should use PostScript Name of each font

1. Open Font Book ( Spotlight type FontBook )
2. Select your Font and view more information and it will look like this

• You need to give PostScript name of the font as fontFamily . Otherwise android will work but iOS will give errors.

This is updated codebase of your App.js

import React, { Component } from 'react';
import { Text, View , TouchableOpacity} from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ backgroundColor:'#e9ffc945',flex: 1,
       justifyContent: "center", alignItems: "center" }}>
        <Text style={{fontSize:26, color: "#85321b45",
        fontFamily: "PressStart2P-Regular"}}>Allah'u'Abha :)</Text>
        <TouchableOpacity
          style={{
            backgroundColor:'#a4a6fc19',
            padding: 95,
            borderRadius: 19,

          }}
        >
         <Text
           style={{
             color: "white",
             fontSize: 20
           }}
         >
           </Text>
         </TouchableOpacity>
      </View>
    );
  }
}

• After that link your assets again and clean project using xcode and rebuild.

• Now you are ready to go...

Make sure you have link your assets and clean project before running