DEV Community

Edo Begagic
Edo Begagic

Posted on

Add custom fonts to react native (expo) app

STEP 1:

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

Alt Text

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

Alt Text

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.

Alt Text

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

Alt Text

STEP 2:

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

Alt Text

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')
});
};

Alt Text

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

Alt Text

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

Alt Text

You should see the different custom fonts on your screen:

Alt Text

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

Discussion (13)

Collapse
emma___09 profile image
Emma • Edited on

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...

Collapse
katnel20 profile image
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.

Collapse
alexparton profile image
AlexParton

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

Collapse
edo_begagic profile image
Edo Begagic Author

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 :)

Collapse
hassanrahimi profile image
hassanrahimi • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

);
}

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

});

Collapse
mohamamddev profile image
mohamamddev

thank you

Collapse
daltonfelipe profile image
Dalton Felipe Silva Varão

Thanks, very explained post, solved my problems!

Collapse
hikhikhacker profile image
HikHikHacker

This was a cool shortcut. Thanks to the post owner

Collapse
hassanrahimi profile image
hassanrahimi • Edited on

hi this is work for me
useEffect

Collapse
mps000 profile image
mps000

Nice explanations , Very helpful for me

Collapse
bamoohaa profile image
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.

Collapse
mohamamddev profile image
mohamamddev

Great, thanks for your content.

Collapse
devahmedbakr profile image
AhmedBakr

Hi , Emma & Alex

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