DEV Community

Discussion on: Add custom fonts to react native (expo) app

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