Custom fonts are not loaded on iOS simulator and ipa builds

[bharatpatil]

Please provide the following:

1. SDK Version: 37.0.0
2. Platforms(Android/iOS/web/all): Android and iOS

I’m facing the issue, my app is not ejected. Fonts are loaded correctly on expo app while developing, also for production android fonts are seen correctly, however for iOS ipa/simulator files fonts are not seen. I’m using expo SDK 37.0.0 and it’s been 3 days I’m trying to debug this problem with no luck Any help would be greatly appreciated.

Screenshot of project loaded in expo app

This is the code that I’m using

import 'react-native-gesture-handler';
import { Ionicons } from '@expo/vector-icons';
import CbLoading from 'components/CbLoading';
import Fonts from 'constants/Fonts';
import * as Font from 'expo-font';
import * as ScreenOrientation from 'expo-screen-orientation';
import { Root, StyleProvider, View, Text, Icon } from 'native-base';
import Roboto from 'native-base/Fonts/Roboto.ttf';
import RobotoMedium from 'native-base/Fonts/Roboto_medium.ttf';
import CbAppNavigation from 'navigation';
import React, { useEffect, useState } from 'react';
import { Platform, ActivityIndicator } from 'react-native';
import { Provider } from 'react-redux';

import MontserratBold from './assets/fonts/Montserrat-Bold.ttf';
import MontserratLight from './assets/fonts/Montserrat-Light.ttf';
import MontserratMedium from './assets/fonts/Montserrat-Medium.ttf';
import MontserratRegular from './assets/fonts/Montserrat-Regular.ttf';
import MontserratSemiBold from './assets/fonts/Montserrat-SemiBold.ttf';
import SpaceMonoBold from './assets/fonts/SpaceMono-Bold.ttf';
import SpaceMonoRegular from './assets/fonts/SpaceMono-Regular.ttf';

import 'locales/index';
// Store
import { PersistGate } from 'redux-persist/integration/react';
import * as Sentry from 'sentry-expo';
import configureStore from 'store';

import theme from './native-base-theme-override';
import getTheme from './native-base-theme/components';

export default function App() {
  const [isReady, setIsReady] = useState(false);
  const { persistor, store } = configureStore();

  // load font effect
  useEffect(() => {
    const loadFont = async (): Promise<any> => {
      try {
        await Font.loadAsync({
          Roboto,
          'Roboto-medium': RobotoMedium,
          'Montserrat-SemiBold': MontserratSemiBold,
          'Montserrat-Regular': MontserratRegular,
          'Montserrat-Medium': MontserratMedium,
          'Montserrat-Bold': MontserratBold,
          'Montserrat-Light': MontserratLight,
          'SpaceMono-Bold': SpaceMonoBold,
          'SpaceMono-Regular': SpaceMonoRegular,
          ...Ionicons.font,
        });
      } catch (err) {
        Sentry.captureMessage('font load error');
        Sentry.captureException(err);
      }
      setIsReady(true);
    };

    const lockOrientation = async (): Promise<any> => {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
    };
    loadFont();
    if (Platform.OS === 'ios' || Platform.OS === 'android') lockOrientation();
  }, []);

  console.disableYellowBox = true;
  if (!isReady) {
    return <CbLoading />;
  }

const Fonts = {
  heading: 'Montserrat-SemiBold',
  headingBold: 'Montserrat-Bold',
  subHeading: 'SpaceMono-Regular',
  subHeadingBold: 'SpaceMono-Bold',
  body: 'Montserrat-Regular',
  bodyBold: 'Montserrat-Medium',
  serif: 'SpaceMono-Regular',
  serifBold: 'SpaceMono-Bold',
};

  return (
    <View style={{ flex: 1, flexDirection: 'column', padding: 40, alignItems: 'center', justifyContent: 'center' }}>
      {Object.keys(Fonts).map((key) => (
        <Text key={key} style={{ fontFamily: Fonts[key] }}>
          {Fonts[key]}
        </Text>
      ))}
      <Icon name="close" style={{ fontSize: 80 }} />
    </View>
  );
}

[bharatpatil]

Note: I have to paste this separately because I’m a new user and expo forum isn’t letting me add more than one image in same post.

Screenshot of simulator binary

[adamjnav]

Hey @bharatpatil,

There was another post regarding custom fonts and the author said that when they set a fontWeight property, the default font was rendered instead of the custom one. Can you see if that seems to be the case here as well?

Cheers,
Adam

[bharatpatil]

Hi @adamjnav, thanks for replying, yes I had seen that post. However, that is not the case here, if we focus on this part from the code above, we can see that Fonts object is iterated and a <Text> element with style fontFamily is applied. However, I couldn’t get it to work.
Also notice that the icon font is displayed as a question mark.

const Fonts = {
  heading: 'Montserrat-SemiBold',
  headingBold: 'Montserrat-Bold',
  subHeading: 'SpaceMono-Regular',
  subHeadingBold: 'SpaceMono-Bold',
  body: 'Montserrat-Regular',
  bodyBold: 'Montserrat-Medium',
  serif: 'SpaceMono-Regular',
  serifBold: 'SpaceMono-Bold',
};

  return (
    <View style={{ flex: 1, flexDirection: 'column', padding: 40, alignItems: 'center', justifyContent: 'center' }}>
      {Object.keys(Fonts).map((key) => (
        <Text key={key} style={{ fontFamily: Fonts[key] }}>
          {Fonts[key]}
        </Text>
      ))}
      <Icon name="close" style={{ fontSize: 80 }} />
    </View>
  );
}

[bharatpatil]

I’ve created a repo which can be used for building iOS simulator/ipa build and issue can be reproduced.

GitHub - bharatpatil/fonttest: Repo to reproduce expo iOS fonts not loading...

[bharatpatil]

@adamjnav This problem is resolved after deleting android and ios folders under project. I’m trying to understand why? Do you have any insights into this?