Back

How to Use Custom Fonts in Expo with NativeWind

Learn how to seamlessly integrate and style custom fonts in your Expo app using NativeWind and Tailwind-style utilities.

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
);
}

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: [],
};

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>
);
}