Custom font load not working in Expo React native app

Question

I am getting issue(attached screenshot) while loading & using custom font in react native expo project. I tried all ways to fix but didn't get a proper solution. One surprising thing I found it that when created a new project and used font there by loading, It's working there but not working in project app. What may be issue? I have tried all steps of Restarting server, System, Reinstalling expo app but none of them worked.

import React, { useState } from 'react';

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

const fetchFonts = () => {
  return Font.loadAsync({
    'SansPro-regular': require('./assets/fonts/SourceSansPro-Regular.ttf'),
    'SansPro-light': require('./assets/fonts/SourceSansPro-Light.ttf'),
    'SansPro-SemiBold': require('./assets/fonts/SourceSansPro-SemiBold.ttf'),
    'SansPro-Bold': require('./assets/fonts/SourceSansPro-Bold.ttf')
  })
}

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false)

  if (!fontLoaded) {
    return (
      <AppLoading startAsync={fetchFonts} onFinish={() => {
        setFontLoaded(true)
      }}
      />
    )
  }

  return (
    <View>
    <Text style = {{fontFamily: 'SansPro-Bold'}}>Welcome to react native</Text>
    </View>
  );
}

score 0 · Answer 1 · answered Jul 06 '20 at 18:30

0

You need to add async

const fetchFonts = async () => {
  return Font.loadAsync({
    'SansPro-regular': require('./assets/fonts/SourceSansPro-Regular.ttf'),
    'SansPro-light': require('./assets/fonts/SourceSansPro-Light.ttf'),
    'SansPro-SemiBold': require('./assets/fonts/SourceSansPro-SemiBold.ttf'),
    'SansPro-Bold': require('./assets/fonts/SourceSansPro-Bold.ttf')
  })
}

And to use it use fontFamily not fontWeight

answered Jul 06 '20 at 18:30

slashsharp

2,823
2
19
26

Well you need to indicate that the function is async by using above method, it's clearly demonstrate in the Expo docs. – slashsharp Jul 07 '20 at 07:13
By Mistake, I wrote fontWeight. Updated Question. Still getting issue. – Piyush Naredi Jul 07 '20 at 07:15
what issue are you getting? I actually copy and create a new expo project using your code and it work fine using my custom font. – slashsharp Jul 07 '20 at 07:25
Yes I mentioned it in question also that surprisingly same code is working when I am using it by creating new project. But it's not working my previously created project. I have to use custom font there. Getting above screenshot issue. What may be problem. Is it regarding some internal node modules? If yes, then how can I fix it? – Piyush Naredi Jul 07 '20 at 07:43

score 0 · Answer 2 · answered May 05 '21 at 12:06

0

You can try with this

expo install 'expo-font'
expo install expo-app-loading

replace it

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

with

import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';

answered May 05 '21 at 12:06

Amranur Rahman

1,061
17
29

Custom font load not working in Expo React native app

2 Answers2

Linked