How to use custom fonts with `twrnc`?

I’ll admit—I spent some time stuck trying to figure this out in the twrnc documentation.

And of course, wasting time is never good in our field.

So here I am, explaining how to use custom fonts with twrnc.

Downloading the Font

Grab your desired font from Google Fonts and download the font family.

Here, I’ll use the Inter font. Click here to download it.

Extracting the File

Extract the font files and place them inside the assets/fonts folder of your project.

Using the Hook

In the root of your application, import useFonts from expo-font, like this:

// app/layout.tsx — if you're using Expo with expo-router import { useFonts } from 'expo-font' import { Stack } from 'expo-router' export default function Layout() {
  const [loaded] = useFonts({
    InterRegular: require('../assets/fonts/Inter-Regular.ttf'),
    InterMedium: require('../assets/fonts/Inter-Medium.ttf'),
  })

  if (!loaded) {
    return null
  }

  return (
    <Stack>
      <Stack.Screen name="index" />
      <Stack.Screen name="+not-found" />
    </Stack>
  )
}

At this point, the fonts are loaded into your app, but you still can’t use them with twrnc, only with the default StyleSheet from React Native.

So let’s fix that.

Now Yes, twrnc

Install twrnc:

npm i twrnc

Then you need to create two files:

• lib/tailwindcss.ts

• tailwind.config.js

Setting Up lib/tailwindcss.ts

import { create } from 'twrnc' const tw = create(require('../tailwind.config'))

export default tw

Setting Up tailwind.config.js

Export the fonts using the same keys you defined in useFonts:

// tailwind.config.js module.exports = {
  theme: {
    fontFamily: {
      'inter-400': 'InterRegular',
      'inter-500': 'InterMedium', // match the name from useFonts
    },
  },
}

Using the Fonts

Now you can use the custom fonts with twrnc:

// app/index.tsx import { View, Text } from 'react-native' import tw from '@/lib/tailwindcss' export default function App() {
  return (
    <View style={tw`flex-1 items-center justify-center`}>
      <Text style={tw`font-inter-400`}>Hello Inter Font</Text>
    </View>
  )
}

Important: Make sure you’re importing tw from your lib, not directly from twrnc.