Cannot load font by expo-font

Expo SDK
1
  1. SDK Version: ~40.0.1
  2. Platforms(Android/iOS/web/all): web
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

Hello,

I am going to apply custom font to my App. But it did not work. I have put the .ttf file to assets folder, but it seemed not to be loaded by the following methods:

  1. I imported useFonts from expo-font, my code snippets is like:
const [fonts] = useFonts({
    "Saira": require("./assets/Saira.ttf")
})
//...
<Text style={{fontFamily: "Saira", fontSize: 24}}>Saira 1234567890</Text>

The text font was not Saira, and there was no error message.

  1. Then I tried loadAsync like this:
React.useEffect(() => {
    const fontLoad = async () => {
        await loadAsync({
            "Saira": require("./assets/Saira.ttf")
        });
    }
    fontLoad();
}, [])

Then the app failed to run, the error message was:

TypeError: Cannot read properties of undefined (reading ‘isDOMAvailable’)

error
error993×833 30.5 KB

By the way, when I imported expo-font, some warning messages showed:

Attempted import error: ‘CodedError’ is not exported from ‘expo-modules-core’.
Attempted import error: ‘Platform’ is not exported from ‘expo-modules-core’.
Attempted import error: ‘UnavailabilityError’ is not exported from ‘expo-modules-core’.

Some other package information:
“expo-font”: “~11.0.1”,
“react”: “16.13.1”,
“react-native-web”: “~0.14.10”,
“@babel/core”: “~7.9.0”,
“@types/react”: “~16.9.35”,
“@types/react-dom”: “~16.9.8”,
“@types/react-native”: “~0.63.2”,
“typescript”: “~4.0.0”

Any suggestions are appreciated.

Edit:
I checked the expo-modules-core, the version is 0.2.0, is it too old to support expo-font?

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.