How do I add a custom font in React Native? - react-native

Question

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

Answer 1

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.
Install and config unimodules on iOS/Android
Configuration for iOS
Configuration for Android
Install expo-font
npm i expo-font
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;
Use it
<Text style={{ fontFamily: "medium" }}>App</Text>
This might be helpful if anyone using react-native-unimodules and wants to config custom fonts.

Answer 2

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.

Answer 3

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 🤸‍♂️☀️