How to use custom fonts

[ImamJanjua]

Like how can I use custom fonts with nativewind.

[martinezguillaume]

You can extend your tailwind.config.js, here is mine

  theme: {
    colors,
    extend: {
      fontFamily: {
        'poppins-regular': ['Poppins_400Regular'],
        'poppins-medium': ['Poppins_500Medium'],
        'poppins-semibold': ['Poppins_600SemiBold'],
      },
    },
  },

don't forget to load your font before starting the app for example, this is what I'm doing in my App.tsx

import {
useFonts,
Poppins_400Regular,
Poppins_500Medium,
Poppins_600SemiBold,
} from '@expo-google-fonts/poppins'

const [fontsLoaded] = useFonts({
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_600SemiBold,
})

and use the custom font like this

import {Text} from 'react-native'
<Text className="font-poppins-semibold" />

[arryanggaputra]

@martinezguillaume I followed your suggestion, and this is what I did, inside app.json I loaded the fonts using

[
  "expo-font",
  {
    "fonts": [
      "./node_modules/@expo-google-fonts/quicksand/Quicksand_300Light.ttf",
      "./node_modules/@expo-google-fonts/quicksand/Quicksand_400Regular.ttf",
      "./node_modules/@expo-google-fonts/quicksand/Quicksand_500Medium.ttf",
      "./node_modules/@expo-google-fonts/quicksand/Quicksand_600SemiBold.ttf",
      "./node_modules/@expo-google-fonts/quicksand/Quicksand_700Bold.ttf"
    ]
  }
]

The tailwind config

fontFamily: {
  Quicksand_300Light: ["Quicksand_300Light"],
  Quicksand_400Regular: ["Quicksand_400Regular"],
  Quicksand_500Medium: ["Quicksand_500Medium"],
  Quicksand_600SemiBold: ["Quicksand_600SemiBold"],
  Quicksand_700Bold: ["Quicksand_700Bold"],
},

But I can't call the font using font-Quicksand_*** , I only able to call the font using fontFamily

<Text
  className="text-xl"
  style={{ fontFamily: "Quicksand_300Light" }}
>
  wakanda
</Text>
<Text
  className="text-xl"
  style={{ fontFamily: "Quicksand_400Regular" }}
>
  wakanda
</Text>
<Text
  className="text-xl"
  style={{ fontFamily: "Quicksand_500Medium" }}
>
  wakanda
</Text>
<Text
  className="text-xl"
  style={{ fontFamily: "Quicksand_600SemiBold" }}
>
  wakanda
</Text>
<Text className="text-xl" style={{ fontFamily: "Quicksand_700Bold" }}>
  wakanda
</Text>

Do you know which part that I'm missing?

[martinezguillaume]

Hello @arryanggaputra ! Try

// tailwind.config.js
const {platformSelect} = require('nativewind/theme')
...
      fontFamily: {
        'quicksand-regular': platformSelect({
          android: 'Quicksand_400Regular',
          ios: 'Quicksand-Regular',
        }),
        'quicksand-medium': platformSelect({
          android: 'Quicksand_500Medium',
          ios: 'Quicksand-Medium',
        }),
        'quicksand-semibold': platformSelect({
          android: 'Quicksand_600SemiBold',
          ios: 'Quicksand-SemiBold',
        }),
        ...
      },

and after

      <Text className="font-quicksand-semibold">

Font family names is not the same between android & ios as stated here

[arryanggaputra]

Hi @martinezguillaume, it works now :). thank you. Can you tell me why we can't use this?

'Quicksand_600SemiBold': platformSelect({
      android: 'Quicksand_600SemiBold',
      ios: 'Quicksand-SemiBold',
}),

[martinezguillaume]

I think every tailwind shorthands need to be kebab-case

[danstepanov]

We are closing all pre-v4.1 issues now that v4.1 is released. If the problem is still happening with the latest v4.1, please open a new issue and reference this one in the description.