Create Custom Font for React Native App with Expo

by
Tiempo de lectura: < 1 minuto

Reading time: < 1 minute
Today we will learn how we can add a custom font using React Native with Expo.

The first thing we need to do is download our font, for example from https://fonts.google.com/

Now we will save it inside assets/fonts

Next, we will go to our entry point, in my case it is app.tsx

We will use expo-font

import * as Font from 'expo-font';
import { useFonts } from 'expo-font';

export default function App() {
  const [fontsLoaded] = useFonts({
    'font_name': require('./assets/fonts/font_name.ttf'),
  });

  if (!fontsLoaded) {
    return null;
  }

  // Render your application
}

If we want to load it natively:

  • We will go to the app.json file
{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["./assets/fonts/font_name.ttf"]
        }
      ]
    ]
  }
}

With this, we can now use our font:

fontFamily: 'font_name',
Post Views: 6

Leave a Comment