Fonts not displaying in iOS Standalone Build

Expo SDK
1

Please provide the following:

  1. SDK Version: 37
  2. Platforms(Android/iOS/web/all): iOS (Standalone Build)

My fonts are not loading when I build a standalone iOS archive. They work fine on expo and in apk and I can’t figure out where it went wrong.

Fonts are placed in expo assets folder and are preloaded using loadAsync. Please help!

expo: “~37.0.3”,
expo-font: “^8.1.1”,
@expo/vector-icons: “^10.0.6”,

import * as Font from 'expo-font';
import {Ionicons} from '@expo/vector-icons';

async componentDidMount(){

    await Font.loadAsync({
      "Montserrat-Light":require('./assets/fonts/Montserrat-Light.ttf'),
      "Montserrat-Regular":require('./assets/fonts/Montserrat-Regular.ttf'),
      "Montserrat-Medium":require('./assets/fonts/Montserrat-Medium.ttf'),
      "Montserrat-SemiBold":require('./assets/fonts/Montserrat-SemiBold.ttf'),
      "Montserrat-Bold":require('./assets/fonts/Montserrat-Bold.ttf'),
      "Montserrat-LightItalic":require('./assets/fonts/Montserrat-LightItalic.ttf'),
      "Montserrat-RegularItalic":require('./assets/fonts/Montserrat-Italic.ttf'),
      "Montserrat-MediumItalic":require('./assets/fonts/Montserrat-MediumItalic.ttf'),
      "Montserrat-BoldItalic":require('./assets/fonts/Montserrat-BoldItalic.ttf'),
      "Ionicons":Ionicons.font.ionicons
    });

    this.setState({loading:false});
  }

Sample

1 Like
2

That approach didn’t work for me either. What worked was to use the useFont hook and place the OTF fonts within an assets/fonts folder. Wait until the hook is set then render the styled element.

import { useFonts } from '@use-expo/font';


const someComponent = () => {
        let [fontsLoaded] = useFonts({
            'Whitney-Book-Bas': require('../../assets/fonts/FONT.otf'),
        });

        if (!fontsLoaded) {
            return <Text>loading...</Text>
        } else {
            return (
                <View>
                    <Text
                          style={{
                              fontFamily: 'Whitney-Book-Bas'
                          }}>some text
                    </Text>
                </View>
            )
        }
    };
1 Like
3

Thanks for the response @uxdw. Did you have to load the default icons for React-Native/Checkbox? Cause my iOS standalone build turns that checkbox into a [?] as well.

4

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