add custom Font in react native

Question

add some custom Font in my react-native project and I tried lots of different way but every time I got error massage :

Error fontFamily "someFont" is not system font and has not been loaded through Font.loadAsync

i've read this page and try this method too : https://docs.expo.io/guides/using-custom-fonts/

here is my package.json :

dependencies": {
    "@use-expo/font": "^2.0.0",
    "expo": "~40.0.0",
    "expo-font": "~8.4.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-web": "~0.13.12"
  },

and this is my app.js

import React from 'react';
import WelcomeScreen from "./app/screens/WelcomeScreen";
import ViewImageScreen from "./app/screens/ViewImageScreen";
import * as Font from "expo-font";
import FullyText from "./app/screens/FullyText";

export default function App() {
   const loadFont = () => {
        return Font.loadAsync({
            "someFont": require('./app/assets/fonts/IRANSans_Bold.ttf')
        })
    }

    return <FullyText/>
}

and My fullyText is on another page :

import React from 'react';
import {Text} from "react-native";
import * as Font from "expo-font";

function FullyText(props) {

    return (
        <Text
        style={{
            top: 100,
            right: 10,
            fontFamily: "someFont",
             fontWeight: 'bold',
        }}>
Some random text
        </Text>
    );
}

export default FullyText;

web developer web developer · Accepted Answer · 2021-04-11T19:00:07

finally I found it why it doesn't work, and now I'm telling my solution for whoever may fall in my problem too:

so first of all check that you install these :

expo install expo-app-loading

and load it like this :

import AppLoading from "expo-app-loading";

after that use this way : first install :

   expo install @expo-google-fonts/raleway

note that i've also import a raleway google font in my project like this

import {useFonts, Raleway_200ExtraLight} from "@expo-google-fonts/raleway";




export default function App() {
    let [fontLoaded, error] = useFonts({
        Raleway_200ExtraLight,

        "someFont": require("./assets/fonts/someFont.ttf"),
    })

    if (!fontLoaded){
      return <AppLoading/>
    }


    return (
        <View style={styles.container}>
            <Text style={
              {
                fontFamily: "Raleway_200ExtraLight",
                fontSize: 24,
              }
            }>Open up App.js to start working on your app!</Text>


    );
}

add custom Font in react native

1 Answers