0

Alright, Ive copied the example at https://reactnative.dev/docs/text here:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from '@use-expo/font';
import { AppLoading } from 'expo';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
        'SequelSansBlackDisp' : require('./assets/fonts/SequelSansBlackDisp.ttf'),
  });
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontFamily: 'Inter-SemiBoldItalic', fontSize: 28 }}>Inter SemiBoldItalic</Text>
        <Text>Platform Default</Text>
      </View>
    );
  }
};

And have my fonts arranged like this:

enter image description here

When I delete the SequelSansBlackDisp font and just have the Inter-SemiBold, all works fine. My local font, however, gets the app stuck on loading and gives the error: enter image description here

How can I load my custom font? (I'd like this to work when I deploy to device as well)

blue
  • 7,175
  • 16
  • 81
  • 179
  • I believe you need to link or provide the path in a config – John Ruddell Jul 08 '20 at 20:10
  • Does this answer your question? [Use custom-font in React-Native](https://stackoverflow.com/questions/29310828/use-custom-font-in-react-native) – John Ruddell Jul 08 '20 at 20:13
  • @JohnRuddell no - I used expo, not react-native create to create my app, so the link command isn't doing anything for me – blue Jul 08 '20 at 21:23

0 Answers0