How to Add Custom Font in React Native Android

How to add custom font in react native android

1. Add your fonts file in

• Project folder/android/app/src/main/assets/fonts/font_name.ttf

2. Restart the package manager using react-native run-android
3. Then you can use your font in your style e.g

• fontFamily: 'font_name'

React native Custom font is not working in android

Try to declare your font style without fontWeight parameter, so please try to declare your font style as:

const styles = StyleSheet.create({ 
      textStyles : { 
          fontFamily : 'Good Feeling Sans', 
          fontSize : 20, 
          margin : 10 
      } 
})

In stead of manipulating with fontWeight, you can use special prepared fonts for this (ttf files with weight variants). But if you really need the fontWeight you can try to declare it with number value, like in example: fontWeight:800

It was a problem with fontWeight I noticed in previous versions of React Native (< 0.60), maybe still present nowadays.

Make sure you also placed your font files in proper folder, accessible to your app. In your pic, assets/fonts is misplaced I believe, it should be placed under android/app/src/main/assets/fonts folder.

How to add custom font in react-native v0.69.1 and react v18.0.0

Run npx react-native-asset command instead of npx react-native link. As the link and unlink command is deprecated for the react native version 0.69

Add custom font to the React Native Application - Version 0.60

To loadFonts which I do in all my project is create a folder called hooks where your App.js is located

Then, Install expo-app-loading & expo-font

Then inside hooks folder create a file called useFonts.js

Inside useFonts.js write like this

import * as Font from "expo-font";

export default useFonts = async () => {
   await Font.loadAsync({
      "Montserrat-Bold": require("../assets/fonts/Montserrat-Bold.ttf"),
    });
};.

Now in your App.js write like this

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';

import useFonts from './hooks/useFonts';

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return <View styles={styles.container}>{/* Code Here */}</View>;
}

How to add custom fonts to react-native v0.61.x?

create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it).

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

after all run react-native link to link the resources to your project.

you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:

const styles = StyleSheet.create({
    text: {
        fontFamily: "yekan",
    },
})

as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.

---

Related Topics