Home » Android » android – Custom font not working in React Native

android – Custom font not working in React Native

Posted by: admin June 15, 2020 Leave a comment

Questions:

I want to use a font from google fonts in my app. Here is the font.

I have placed the .ttf file in app/fonts.

package.json:

{
    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "rnpm": {
        "assets": ["./app/fonts"]
    },
    "jest": {
        "preset": "react-native",
        "moduleNameMapper": {
            "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
        }
    },
    "dependencies": {
        "flow-typed": "^2.0.0",
        "immutable": "^3.8.1",
        "react": "~15.4.1",
        "react-native": "0.42.0",
        "react-native-vector-icons": "^4.0.0",
        "react-redux": "^5.0.3",
        "redux": "^3.6.0",
        "redux-immutable": "^4.0.0",
        "redux-observable": "^0.14.1",
        "rxjs": "^5.2.0"
    },
    "devDependencies": {
        "babel-eslint": "^7.1.1",
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "eslint": "^3.17.0",
        "eslint-plugin-flowtype": "^2.30.3",
        "eslint-plugin-jsx": "^0.0.2",
        "eslint-plugin-react": "^6.10.0",
        "eslint-plugin-react-native": "^2.3.1",
        "flow-bin": "^0.42.0",
        "jest": "19.0.2",
        "jest-cli": "^19.0.2",
        "react-test-renderer": "~15.4.1",
        "redux-devtools": "^3.3.2",
        "remote-redux-devtools": "^0.5.7"
    }
}

then ran react-native link.

Then use the font in my app:

import { View, Text } from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'

export const Volcalc = () => (
  <View style={styles.container}>
    <Text style={styles.text}>SHAPE</Text>
    <Shape />
    <Text style={styles.text}>HEIGHT</Text>
    <Height />
    <Text style={styles.text}>WIDTH</Text>
    <Width />
    <Text style={styles.text}>THICKNESS</Text>
    <Thickness />
  </View>
)

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor
  },
  text: {
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 15,
    fontFamily: 'Orbitron'
  }
}

In android it doesn’t show the new font but has no error. In ios it has error:

Unrecognised font family “Orbitron”

What am I doing wrong?

How do I find out the EXACT value to place in fontFamily: 'xxx'?

How to&Answers:

Many answers are here for custom font in react-native for version < 0.60

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

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

3- run react-native link command in the root project path.

4- run it using react-native run-android or react-native run-ios command

Answer:

In case somebody is reading this because their setup is fine and custom fonts work on iOS and in some cases don’t work on Android:

Additionally to the installation answers given above – make sure you are not setting font fontWeight parameter (or other extra font transformation in styles). In my case it ‘broke’ custom font, so I had to add and use font ttf with variants (like Roboto-Thin, Roboto-Bold etc) in stead of setting bold in styles.

Also worth to notice: Manuel Hernandez found out in comment below that it is possible to use i.e. fontWeight:800 in stead of fontWeight:'bold'.

Answer:

Fonts in React Native are handled in the same way as in native applications, as assets to the native project.

In iOS, you have to add them as resources. You can have a good description here.

In Android you have to add them as assets. Here you can see how to.

Also note that the name of the font in iOS is the one contained in the metadata of the .ttf file, whereas in Android they are matched by the file name and several suffixes.

Answer:

It doesn’t look like you’ve linked correctly or your app just isn’t loading the new resource.

Add

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

to your package.json.

Then

rm -rf node_modules && npm install && react-native link

If things go right, search inside android/app/src/main/assets/fonts/ for your custom font.
If you see it, you linked successfully.

Similarly for iOS, run XCode and expand Resource dropdown for your custom font.

Kill your emulator and re-try

react-native run-ios

Answer:

Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf

Answer:

To find the exact value to use as your fontFamily, you can run the project from xcode after adding the following code to your AppDelegate.m file in xcode. You’ll see a list of fonts in the output section in xcode.

for (NSString* family in [UIFont familyNames])
{
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"  %@", name);
    }
}

Helpful link for adding custom fonts: http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

Answer:

I found out that for some fonts you need to run npx react-native-asset in order to make it work on Android. If it’s not working within 3rd party components you have to add fontWeight: 'normal' to override some default values.

Answer:

The path could be incorrectly linked –

The path where react-native link stored the fonts was – android/src/main/assets/fonts

Path should be – android/app/src/main/assets/fonts

Even with react-native version 0.62 this problem exits

Answer:

These steps worked for me.

  1. Add your fonts to the yourproject/assets folder.
  2. Then add "rnpm": {"assets": ["./assets/fonts/"]} to your package.json file.
  3. Run react-native link
  4. Check if the fonts are added to yourproject/android/app/src/main/assets/fonts(for android)
  5. Must run react-native run-android to get your changes.(most people forget to run this)

Answer:

Adding my two cents here because it took me a good 4 hours to figure out: check if your font is “Valid”. On Mac you can do this in Font Book > File > Validate font. React-Native link will not throw any errors and neither will Android Studio or Xcode. So if your font is corrupted it will simply be ignored and you have no idea why. To make it valid I exported it from Font Book and ran the react-native link command again. Hope it helps someone.

Answer:

For linking the fonts you can do react-native link ./src/assets/fonts if

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

This should copy all the fonts in your ./src/assets/fonts/ to the ios project library and android/app/src/main/assets/fonts/ folder. In ios it also updates the info.plist file.

Now you have to use the PostScript Name of the font that you linked to use it after rebuilding your project.