CODEWITHSUNDEEP
react-nativefonts
Jeffrey Enriquez
Jeffrey Enriquez

Reputation: 117

How do I add a custom font in React Native?

I'm running this on ios. I followed the steps here and was able to get the "Montserrat-SemiBold" font to work. I tried doing the same thing with "Source Sans Pro" but I'm getting the error "Unrecognized font family".

I've spent a couple of hours trying multiple things I found online but can't get it to work.

This is my repo => RefugeApp

p.s. I'm using VSCode

Upvotes: 1

Views: 3956

Answers (3)

Naruto Uzumaki
Naruto Uzumaki

Reputation: 622

1 - download all the fonts you want (make sure its terminated in .ttf example: Arial-narrow.ttf)

2 - rename it as simple as possible eg: from piazzolla-reagular=s8.ttf to piazzolla-regular.ttf

3 - create an "assets" folder on your project (you probably already have created one)

4 - create a folder named "fonts" inside your your assets folder and paste all your downloaded (and renamed) fonts inside there

5 - create a file named "react-native.config.js" inside your project and fill the inside with this code:

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
};

6 - on your console (inside your project directory) write:

npx react-native link

this will link your project...

now, to apply your fonts on your style component use the fontFamily prop, eg:

style={{color:'#999',fontFamily:'exo2-regular'}}

hope this helps everyone whos in need of a font guide. ps: I concat this method from various website guides around web like: https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4 How do I add a custom font in React Native? https://medium.com/@alcides.bsilvaneto/installing-custom-fonts-ttf-or-otf-on-react-native-0-60-projects-e8dafbc0dff3 No credits for me.

Upvotes: 3

Rostyslav Broslavskyi
Rostyslav Broslavskyi

Reputation: 66

  • If you were able to do it correctly for Montserrat-SemiBold I suppose that your fonts are installed correct so I will skip this step, let's go to "Unrecognized font family" problem

  • You need to check font name in your system, not by name of the file, you need to open font_book in Launchpad and check font that you interested in Example image

  • For example the name of file IMFellEnglishSC-Regular.ttf but in the system, it could be IM_FELL_English_SC with underscores _ :)

  • So you need to use it like fontFamily: IM_FELL_English_SC, even if filename is different

  • In your case seems like fontFamily: SourceSansPro-Regular should work for you check this image

  • For future you could use this cool package to easy link & unlink fonts it's quite cool and simple for such things like adding custom fonts -> react-native-assets

  • Cheers 🤸‍♂️☀️

Upvotes: 0

U.A
U.A

Reputation: 3373

I use expo-font to use custom fonts, It's easy and straight forward.

Steps to use custom fonts with expo-font on the bare react-native project.

  1. Install and config unimodules on iOS/Android
  2. Install expo-font
    • npm i expo-font
  3. Setup your custom fonts on your App.js
import "react-native-gesture-handler";
import React from "react";
import { Text } from "react-native";
import * as Font from "expo-font";

class App extends React.Component {
  state = {
    appIsReady: false,
  };

  async componentDidMount() {
    this.prepareResources();
  }

  prepareResources = async () => {
    await cacheAssets();

    this.setState({ appIsReady: true });
  };

  render() {
    if (!this.state.appIsReady) {
      return <Text>loading...</Text>;
    }

    return <Text>App</Text>;
  }
}

async function cacheAssets() {
  const fontAssets = cacheFonts([
    { thin: require("./assets/fonts/thin.ttf") },
    { medium: require("./assets/fonts/medium.ttf") },
    { bold: require("./assets/fonts/bold.ttf") },
  ]);

  await Promise.all([...fontAssets]);
}

function cacheFonts(fonts) {
  return fonts.map((font) => Font.loadAsync(font));
}

export default App;
  1. Use it
<Text style={{ fontFamily: "medium" }}>App</Text>

This might be helpful if anyone using react-native-unimodules and wants to config custom fonts.

Upvotes: 1

Related Questions