How to add custom fonts in react-native and use the custom fonts using the tailwind-css (native-wind)

Akash
Mar 21, 2024

--

Hi while devloping the apps change fonts play a crucial in the ui , i found that there is no clear way of how to change fonts in the latest react native- cli so i came up with this solution..

  1. Download the .ttf folder from the google fonts
  2. add the .ttf to the ./assets/fonts/{your .ttf file
  3. Create a react-native.config.js (note the 2 dots)
  4. Paste this code

module.exports = {

assets: [‘./assets/fonts/’]
}

5. Run npx react-naitve-asset to link the fonts

6. Then go to the tailwind config add the font config as follows 🔧

theme: {
extend: {
fontFamily: {
k2d: [‘K2d’],
k2dbold:[‘K2DBold’],
yester:[‘Yesteryear’]
}

7. Restart the metro npx react-native run-android

8. Finally now you can use as many custom fonts you need

--

--