Is there a way to set a font globally in React Native?

Question

I need to create a custom font that applies to every Text component in the whole application.

Is there is a way to set a font globally in React Native?

Answer 1

One way is to create a wrapper for RN Text say MyTextCustomFont:

const MyTextCustomFont = (props) => {
   return (
        <Text style={{fontFamily:'myFont'}} {...props} >{props.children}</Text>
   )
}

import this MyTextCustomFont and use anywhere.

Another way is to define a style object and use it wherever you want.

Answer 2

To do this we have to implement a method in which we will override Text component creation in React Native. In this we will set default font family or size or any attribute we want to set by default.

// typography.js

import React from 'react'
import { Text, Platform, StyleSheet } from 'react-native'

export const typography = () => {
  const oldTextRender = Text.render
  Text.render = function(...args) {
    const origin = oldTextRender.call(this, ...args)
    return React.cloneElement(origin, {
      style: [styles.defaultText, origin.props.style],
    })
  }
}

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: 'NunitoSans-Regular',//Default font family
  }
}); 

Then in index.js you have to do this:

import { typography } from './src/utils/typography'

typography()

Detailed answer here: https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

Answer 3

I think your problem is add Custom Fonts in react native.

1. Add Your Custom Fonts to Assets

Add all the font files you want to an “assets/fonts” folder in the root of your react native project:

2. Edit Package.json

Adding rnpm to package.json providing the path to the font files:

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

3. Link assest files

run this command in your react native project root folder

react-native link

This should add the font references in your Info.plist file for iOS and on Android copy the font files to android/app/src/main/assets/fonts.

4. Add in stylesheet

Add a fontFamily property with your font name:

const styles = StyleSheet.create({
      title: {
        fontSize: 16,
        fontFamily: 'PlayfairDisplay-Bold',
        color: '#fff',
        paddingRight: 20,
      },
    });

Answer 4

So, I've made a component doing this quite easely some times ago. This is working with Expo, I don't know for vanilla react-native.

at the start of your app:

import { Font, Asset } from 'expo'

async initFont() {
    try {
      await Font.loadAsync({
        'Bariol': require('src/assets/font/Bariol_Regular.otf'),
        'Bariol Bold': require('src/assets/font/Bariol_Bold.otf'),
      })
      this.setState({ fontReady: true })
    } catch (e) {
      console.log(e)
    }
  }

Then, you have to create a component file like text.js containing this code:

export default function (props) {
  let font = { fontFamily: 'Bariol' }
  if (props.bold) {
    font = { fontFamily: 'Bariol Bold' }
  }

  const { bold, style, children, ...newProps } = props
  return (
    <Text {...newProps} style={[Style.text, props.style, font]}>
      {props.children}
    </Text>
  )
}

Finally, in any of you other component / page just import MyText:

import Text from 'path/to/text.js'

use it like a normal Text component:

<Text bold>Hello World!</Text>

Even if this solution looks a bit more complicated than the others, it is easier to use once the setup is ok, since you just have to import Text.

Answer 5

You can override Text behaviour by adding this in any of your component using Text:

Edit: Add this code in your App.js or main file

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
} 

For react Native Version 0.56 or below, Add this code in your App.js or main file

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

Reference Or create your own component, such as MyAppText. MyAppText would be a simple component that renders a Text component using your universal style and can pass through other props, etc.

Answer 6

I use a wrapper with default props like this :

const CustomText = ({ fontFam = "regular", ...props }) => {
  const typo = {
    light: "Montserrat_300Light",
    regular: "Montserrat_400Regular",
    bold: "Montserrat_600SemiBold",
  };

  return (
    <Text {...props} style={[{ fontFamily: typo[fontFam], ...props.style }]}>
      {props.children}
    </Text>
  );
};

export default CustomText;

By default, if "fontFam" is not indicated it will be regular font.

An example with bold typo :

   <CustomText fontFam="bold" style={{ marginTop: 30, color: "grey" }}>
              Some Text
   </CustomText>

You can replace all your <Text/> by <CustomText />.

Answer 7

If you don't have to create custom component, you could try react-native-global-font. It will be apply for your all Text and TextInput

Answer 8

yes

app.js

import styles from './styles';
{...}
 <Text style={styles.text}>hello World </Text>
{...}

styles.js

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
 text: {
    // define your font or size or whatever you want to style here
  },

use style on every text and all changes will affect all text components