DEV Community

Add custom fonts to react native (expo) app

Edo Begagic on November 03, 2019

STEP 1: 1. In your assets folder (or anywhere you prefer) create a new 'fonts' folder. 2. Go to https://fonts.goog...
Read full post
Collapse
 
emma___09 profile image
Emma • • Edited

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

in App.js:

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

  if (!fontsLoaded) {
    return <AppLoading />;
  }
Enter fullscreen mode Exit fullscreen mode

Then

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

then i pass (TajawalFontFamily ) as prop to my component 

<Home font:{TajawalFontFamily }
Enter fullscreen mode Exit fullscreen mode

in Home component:

<Text style={[styles.headerText, font.ExtraBold]}>الباحث في الحديث</Text>
Enter fullscreen mode Exit fullscreen mode
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
 
adelpro profile image
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
Enter fullscreen mode Exit fullscreen mode

in App.js:

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

  if (!fontsLoaded) {
    return <AppLoading />;
  }
Enter fullscreen mode Exit fullscreen mode

Then

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

then i pass (TajawalFontFamily ) as prop to my component 

<Home font:{TajawalFontFamily }
Enter fullscreen mode Exit fullscreen mode

in Home component:

<Text style={[styles.headerText, font.ExtraBold]}>الباحث في الحديث</Text>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
edo_begagic profile image
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 :)

Collapse
 
hassanrahimi profile image
hassanrahimi • • Edited

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
 
hik8hik profile image
Hik Hik •

This was a cool shortcut. Thanks to the post owner

Collapse
 
daltonfelipe profile image
Dalton Felipe Silva Varão •

Thanks, very explained post, solved my problems!

Collapse
 
hassanrahimi profile image
hassanrahimi • • Edited

hi this is work for me
useEffect

Collapse
 
mohamamddev profile image
mohamamddev •

Great, thanks for your content.

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
 
burakodabas profile image
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.

Collapse
 
devahmedbakr profile image
AhmedBakr •

Hi , Emma & Alex

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