I want to use a custom font in a react native app (pixelify-sans if that matters), at first i tried to load it using the plugin (app.json) way from the docs, that didnt seem to work nor to log an error, so i switched to the useFont way, yet nothing seems to change, nor does it log an error, help! (I run my app using npx expo run:android)

the font is located in assets/fonts in root folder (Pixelify-Sans.ttf)

this is the _layout.tsx file

import { SplashScreen, Stack } from "expo-router";
import { useEffect } from "react";

export default function RootLayout() {
  const [loaded, error] = useFonts({
    'Pix': require('../assets/fonts/Pixelify-Sans.ttf'),
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync();
    }
    if (error) {
      console.error('Error loading font:', error);
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }

  return (
    <Stack>
      <Stack.Screen name="index" options={{
        title: "Home",
        headerShown: false,
      }} />
      <Stack.Screen name="loadingGame" options={{
        title: "Loading",
        headerShown: false,
      }} />
      <Stack.Screen name="game" options={{
        title: "Game",
        headerShown: false,
      }} />
    </Stack>
  );
}

this the TextFact.tsx file located in components folder

import { View ,Text} from "react-native";
import { getFact } from '@/utils/fetchRandomFact';
import { useState, useEffect } from 'react';
import TypeWriterEffect from "react-native-typewriter-effect";
import { delay } from "@/utils/delay";

export default function TextFact() {
  const [fact1, setFact1] = useState('');
  const delayTime = 1000;

  useEffect(() => {
    getFact().then((fact) => {
      setFact1(fact);
    });
  }, []);

  return (
    <View style={{ paddingVertical: 15, width: '100%', height: '20%' }}>
        <Text style={{
            fontSize: 20,
            textAlign: 'center',
            color: '#000',
            fontWeight: 'bold',
            fontFamily: 'Pix',
         
        }}>this is a test</Text>
    
      
    </View>
  );
}