Custom font not working in React Native

Question

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'?

Solution 1

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

Solution 2

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

Solution 3

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.

Solution 4

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.

Solution 5

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

View more solutions