How to define custom font for Expo/React Native with NativeWind

This guide requires you to set up a new Expo/React Native project with NativeWind. Once you have that ready, let's setup a new custom fonts.

Prepare Fonts and update Tailwind CSS config

Ensure that you have downloaded the fonts and stored them in an assets/fonts folder.

PlusJakartaSans fonts downloaded locally from GoogleFonts

Once you have all the fonts ready, extend the fontFamily config in tailwind.config.js.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {
            fontFamily: {
                Jakarta: ["Jakarta", "sans-serif"],
                JakartaBold: ["Jakarta-Bold", "sans-serif"],
                JakartaExtraBold: ["Jakarta-ExtraBold", "sans-serif"],
                JakartaExtraLight: ["Jakarta-ExtraLight", "sans-serif"],
                JakartaLight: ["Jakarta-Light", "sans-serif"],
                JakartaMedium: ["Jakarta-Medium", "sans-serif"],
                JakartaSemiBold: ["Jakarta-SemiBold", "sans-serif"],
            },
        },
    },
    plugins: [],
};

Load fonts in the root layout while the app is loading.

// @/app/_layout.tsx

import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import "react-native-reanimated";
import { Text, View } from "react-native";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    "Jakarta-Bold": require("../assets/fonts/PlusJakartaSans-Bold.ttf"),
    "Jakarta-ExtraBold": require("../assets/fonts/PlusJakartaSans-ExtraBold.ttf"),
    "Jakarta-ExtraLight": require("../assets/fonts/PlusJakartaSans-ExtraLight.ttf"),
    "Jakarta-Light": require("../assets/fonts/PlusJakartaSans-Light.ttf"),
    "Jakarta-Medium": require("../assets/fonts/PlusJakartaSans-Medium.ttf"),
    Jakarta: require("../assets/fonts/PlusJakartaSans-Regular.ttf"),
    "Jakarta-SemiBold": require("../assets/fonts/PlusJakartaSans-SemiBold.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <View>
      <Text className="text-2xl text-black font-JakartaSemiBold">
        Welcome 👋
      </Text>
    </View>
  );
}

Use In Code

To use in your code, you may reference the font family directly like below.

<Text className="font-JakartaMedium">ExtraLight</Text>
<Text className="font-JakartaLight">Light</Text>
<Text className="font-JakartaMedium">Medium</Text>
<Text className="font-JakartaSemiBold">Semibold</Text>
<Text className="font-JakartaBold">Bold</Text>
<Text className="font-JakartaExtraBold">ExtraBold</Text>

Do note of the different font weights. Ensure that you have all those font weights referenced in your assets folder.