How to Use Custom Fonts in Expo with NativeWind

Download the font files (in .ttf or .otf format)

Download the font files you want to use in your Expo app. Ensure they are in .ttf or .otf format.
Place the font files in a directory within your Expo project, such as assets/fonts/.

Load the font

Go to layout.tsx or App.tsx file in your Expo project.
Use the useFonts hook from expo-font to load your custom font.

import { useFonts } from 'expo-font';

// Your font file path
const SpaceGroteskBold = require("../assets/fonts/SpaceGrotesk-Bold.ttf");

export default function App() {
 let [fontsLoaded] = useFonts({
  "SpaceGroteskBold": SpaceGroteskBold,
});

if (!fontsLoaded) {
  return null;
}

return (
  // ... Your app components
);
}

import { useFonts } from 'expo-font';// Your font file pathconst SpaceGroteskBold = require("../assets/fonts/SpaceGrotesk-Bold.ttf");export default function App() { let [fontsLoaded] = useFonts({  "SpaceGroteskBold": SpaceGroteskBold,});if (!fontsLoaded) {  return null;}return (  // ... Your app components);}

Define the font in tailwind.config.js


/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
  './App.{js,jsx,ts,tsx}',
  './src/**/*.{js,jsx,ts,tsx}',
],
theme: {
  extend: {
    fontFamily: {
       "SpaceGroteskBold": ["SpaceGroteskBold"], // Use the same name as in useFonts
    },
  },
},
plugins: [],
};

/** @type {import('tailwindcss').Config} */module.exports = {content: [  './App.{js,jsx,ts,tsx}',  './src/**/*.{js,jsx,ts,tsx}',],theme: {  extend: {    fontFamily: {       "SpaceGroteskBold": ["SpaceGroteskBold"], // Use the same name as in useFonts    },  },},plugins: [],};

Apply the font in Nativewind styles


import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
return (
  <View className="flex-1 items-center justify-center">
    <Text className="font-SpaceGroteskBold text-3xl">Hello, Nativewind!</Text>
  </View>
);
}

import React from 'react';import { Text, View } from 'react-native';export default function App() {return (  <View className="flex-1 items-center justify-center">    <Text className="font-SpaceGroteskBold text-3xl">Hello, Nativewind!</Text>  </View>);}

How to Use Custom Fonts in Expo with NativeWind

Download the font files (in .ttf or .otf format)

Load the font

Define the font in tailwind.config.js

Apply the font in Nativewind styles

Enjoyed this article?

Recommended for you

React Native Errors and Warnings

Programming-foundations

On this page