Custom fonts do not load in Expo

Question

I’m trying to add custom fonts in my project with expo, but even following the documentation and Apploading returning that the fonts were loaded the text does not change font when placing the fontFamily

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Pokeball from './assets/patterns/pokeball.svg' 


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


const fetchFonts = () => {
  return Font.loadAsync({
  'sf-pro-display-bold': require('./assets/fonts/sf-pro-display-bold.ttf'),
  'sf-pro-display-medium': require('./assets/fonts/sf-pro-display-medium.ttf'),
  'sf-pro-display-regular': require('./assets/fonts/sf-pro-display-regular.ttf')
  });
};
 
import Home from  './src/pages/home'

export default function App() {

  const [dataLoad, setDataLoad] = useState(false);

  if(!dataLoad){
    return(
      <AppLoading
      startAsync={fetchFonts}
      onFinish={() => {setDataLoad(true)}}
      onError={console.warn}/>
    )
  }else {
    return (
      <View style={styles.container}>
        <Pokeball width={'100%'} height={'100%'} fillOpacity={0.05} style={styles.imageBackground}/>
        <Home />
<Text style={styles.teste}>Teste</Text>
      </View>
    
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageBackground: {
    position: 'absolute',
    top: '-48%'
  }, 
  teste: {
    fontFamily: 'sf-pro-display-bold',
  }
});