How to use font family in react native expo with Nativewind
#reactnative#expo#nativewind#tailwindcss
Abdullah Nasir

Abdullah Nasir @abdullah_nasir_98b2b478ee

About: Dedicated Full-Stack Architect. Building scalable, performant web and mobile apps with React.js, TypeScript, and React Native. I focus on clean code and pixel-perfect responsive design using Tailwind.

Location:
Karachi, Pakistan
Joined:
Oct 19, 2025

How to use font family in react native expo with Nativewind

Publish Date: Oct 20 '25
1 1

This posts showcase how to setup any font family in your react-native (Expo) projects and then subsequently use it with nativewind

1: First you have to add the npm package of that particular font family using your terminal

npm i @expo-google-fonts/poppins
Enter fullscreen mode Exit fullscreen mode

After it, Run the expo command in your terminal.

 npx expo install expo-font
Enter fullscreen mode Exit fullscreen mode

Here after the installation of packages you will need to update tailwind.config.js with font sizes you want you can from light to bold as per need of your project.

theme: {
    extend: {
      fontFamily: {
        "poppins-light": ["Poppins-Light"],
        "poppins-regular": ["Poppins-Regular"],
        "poppins-medium": ["Poppins-Medium"],
        "poppins-semibold": ["Poppins-SemiBold"],
        "poppins-bold": ["Poppins-Bold"],
      },
    },
  },
Enter fullscreen mode Exit fullscreen mode

after it the final steps involve to load all the names of fonts you used in your tailwind.config in your main file _layout.tsx (if you're not using expo router then add these in your App.ts)

import {
  Poppins_300Light,
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_600SemiBold,
  Poppins_700Bold,
  useFonts,
} from "@expo-google-fonts/poppins";
Enter fullscreen mode Exit fullscreen mode

then import in your main file _layout.tsx****;

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    "Poppins-Light": Poppins_300Light,
    "Poppins-Regular": Poppins_400Regular,
    "Poppins-Medium": Poppins_500Medium,
    "Poppins-SemiBold": Poppins_600SemiBold,
    "Poppins-Bold": Poppins_700Bold,
  });

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

  if (!fontsLoaded) {
    return null;
  }

  return <RootLayoutNav />;
}
Enter fullscreen mode Exit fullscreen mode

that will be look this and now you are ready to used in your project

The Result :

<Text className="text-primary  font-poppins-light"> Poppins Light is used here.  </Text>
<Text className="text-primary font-poppins-regular"> Poppins Regular is used here. </Text>
<Text className="text-primary font-poppins-bold"> Poppins Bold is used here. </Text>
Enter fullscreen mode Exit fullscreen mode

Comments 1 total

Add comment