skip to Main Content

I trying to upload custom fonts for my expo ios app but there’s always some pesky error that does not go away and no fix from google/github/stackoverflow helps.
In the end the error always is

The error

Here is my situation

I have the font in /assets/fonts/Avenir LT 95 Black Oblique.ttf

I have the plugin written in the app.json file

   [
        "expo-font",
        {
          "fonts": ["./assets/fonts/Avenir LT 95 Black Oblique.ttf"]
        }
      ]

I have a react-native-config.js with this in it

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./assets/fonts"],
};

in my app.js I have tried runnning these following lines:

Expo font’s own guide

import { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

I have tried this fix but AppLoading is deprecated so ofc it didn’t really work

I have tried both fixes in this thread by the top answer, same error

I have tried the tip from "zdivozzo" and it made the error go into a warning and say

The warning

Yet again, the font is written down as a plugin in app.json and I have checked spelling a million times and it seems good.

What am I missing here? Can anyone help me?

My nodes are up to date and I even tried deleting node_modules and reinstalling it again but nothing changed

2

Answers


  1. I believe you are using macOS. MacOS does not have all the fonts installed in the system. This error might not be because of your code. If you are using macOS, you will require to install that font family in your system as well, just open the ttf file from finder, it will give option to install that font if not already installed. Hope this helps.

    Login or Signup to reply.
  2. Ok, since everything else seems to be correct, can you rename the ttf file of the font which you included in your assets folder and make it without space and try including it in your code as you have done already by changing to new name. MacOS have different way to read the spaces, so I guess that is what is causing the issue. Try renaming the file and include that ttf instead.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search