Create Custom Font for React Native App with Expo

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

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": [
          "fonts": ["./assets/fonts/font_name.ttf"]

With this, we can now use our font:

fontFamily: 'font_name',

Leave a Comment