Add custom fonts to react native (expo) app

STEP 1:

1. In your assets folder (or anywhere you prefer) create a new 'fonts' folder.

2. Go to https://fonts.google.com/ (or any other fonts library) and download your preferred font or multiple fonts.

3. Extract the TrueTypeFont (.ttf) file to your fonts folder. (If you are using VSCode text editor, you can drag the extracted files directly into the editor.

4. I added three different fonts: 'Roboto-Bold.ttf', 'Roboto-Italic.ttf' and 'Roboto-Regular.ttf'.

STEP 2:

In your project root, using the command prompt, install expo-font with following command: expo install expo-font

STEP 3:

1. In your App.js import following:

import * as Font from 'expo-font';
import { AppLoading } from 'expo';

2. Write following function

const fetchFonts = () => {
return Font.loadAsync({
'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
'roboto-italic': require('./assets/fonts/Roboto-Italic.ttf'),
'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf')
});
};

I am using the 'roboto-bold', 'roboto-italic' and 'roboto-regular' fonts. You will use the name of the font you downloaded.

3.Add state

4. Add if statement to check if the fonts loaded and style the text components to check if your custom fonts are working.

You should see the different custom fonts on your screen:

If you have any additional questions or suggestions, feel free to leave a comment! :)

Comments

[Emma]

Hey, thanks for you article !

However I still have the same error ("fontFamily : 'OpenSans-SemiBold" is not a system font and has not been loaded through Font.loadAsync")... I don't understand why, I have checked and re-checked my code but it still doesn't work. Can you help me to figure it out ?

screen of my code:
drive.google.com/file/d/1filV2ZK9Y...

[adelpro]

Im using this method with Expo react native:
first install the relative npm packages, in my case im using "tajawal" font

npm i @expo-google-fonts/tajawal

in App.js:

let [fontsLoaded] = useFonts({
    Tajawal_300Light,
    Tajawal_400Regular,
    Tajawal_500Medium,
    Tajawal_800ExtraBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

Then

const TajawalFontFamily = StyleSheet.create({
  ExtraBold: {
    fontFamily: "Tajawal_800ExtraBold",
  },
  Light: {
    fontFamily: "Tajawal_300Light",
  },
  Regular: {
    fontFamily: "Tajawal_400Regular",
  },
  Medium: {
    fontFamily: "Tajawal_500Medium",
  },
});

then i pass (TajawalFontFamily ) as prop to my component

<Home font:{TajawalFontFamily }

in Home component:

<Text style={[styles.headerText, font.ExtraBold]}>الباحث في الحديث</Text>

[Katie Nelson]

Hi Emma, I'm Katie, welcome to the DEV community!
I see you are new here and already asking questions which is great!
I'm sure you'll find lots of help and support on DEV for all your coding needs.

[AlexParton]

Me too, same stetps and same error. Did you solve it Emma?
thanks

[adelpro]

Im using this method with Expo react native:
first install the relative npm packages, in my case im using "tajawal" font

npm i @expo-google-fonts/tajawal

in App.js:

let [fontsLoaded] = useFonts({
    Tajawal_300Light,
    Tajawal_400Regular,
    Tajawal_500Medium,
    Tajawal_800ExtraBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

Then

const TajawalFontFamily = StyleSheet.create({
  ExtraBold: {
    fontFamily: "Tajawal_800ExtraBold",
  },
  Light: {
    fontFamily: "Tajawal_300Light",
  },
  Regular: {
    fontFamily: "Tajawal_400Regular",
  },
  Medium: {
    fontFamily: "Tajawal_500Medium",
  },
});

then i pass (TajawalFontFamily ) as prop to my component

<Home font:{TajawalFontFamily }

in Home component:

<Text style={[styles.headerText, font.ExtraBold]}>الباحث في الحديث</Text>

[Edo Begagic]

Dear Emma & Alex,

Sorry for the late reply. You can download a version from my github, compare it with your code and try for yourself. :)

github.com/edobegagic/loadfont

Hope this helps :)

[hassanrahimi]

hi , this is work correctly , useEffect

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TextTraning from './Component/L001_Text';
import * as font from 'expo-font';
import { AppLoading } from 'expo-font';

export default function App() {

useEffect(() => {
font.loadAsync({
'nazanin': require('./assets/fonts/BNazanin.ttf'),
'b-titr': require('./assets/fonts/BTitrBd.ttf'),
'yekan': require('./assets/fonts/BYekan.ttf'),
'zar': require('./assets/fonts/BZar.ttf'),
'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
'roboto-italic': require('./assets/fonts/Roboto-Italic.ttf'),
'roboto-regular': require('./assets/fonts/Roboto-Black.ttf')
})
},[])
return (

    <Text style={}>Hiiiiiiiiiiii</Text>{fontFamily:'roboto-italic'}
    <Text style={fontFamily:'b-titr'}}>سلام به همه دوستان </Text>

</View>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#aaa',
alignItems: 'center',
justifyContent: 'center',
}

});

[mohamamddev]

thank you

[Hik Hik]

This was a cool shortcut. Thanks to the post owner

[Dalton Felipe Silva Varão]

Thanks, very explained post, solved my problems!

[hassanrahimi]

hi this is work for me
useEffect

[mohamamddev]

Great, thanks for your content.

[mps000]

Nice explanations , Very helpful for me

[Bashir Hamza]

Thank you for this. It helped a great deal.

So there is no way to just have a global font that every tag will automatically use.

[Burak Odabaş]

I found this;
npmjs.com/package/react-native-glo...

However, not font changes in globally. I think you should put fontFamily for every tags.

[AhmedBakr]

Hi , Emma & Alex

This solution worked for me
drive.google.com/file/d/1u0HzPNILU...