React native Question posted in
The official React Native documentation can be found here.

React native – Certain custom fonts not appearing with Tailwind CSS

I’m trying to make my first app using React Native and Tailwind. I imported the Rajdhani font family to use in this app, but for some reason only Rajdhani Bold actually shows up in the Expo preview on my IOS device that I’m testing on.

this is my index.js file:

import { StatusBar } from "expo-status-bar";
import { Text, View} from "react-native";
import { Link } from "expo-router";

export default function App(){
    return(
        <View className="flex-1 items-center justify-center bg-white">
            <Text className="text-3xl font-rSemiBold">Test test</Text>
            <StatusBar style="auto" />
            <Link href="/sign-in" style={{color: 'blue'}}>Proceed to Login</Link>
        </View>
    );
}

This is my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#D0E358'
      }
    },
    fontFamily: {
      rRegular: ["Rajdhani-Regular", "sans-serif"],
      rBold: ["Rajdhani-Bold", "sans-serif"],
      rSemiBold: ["Rajdhani-SemiBold", "sans-serif"],
      rLight: ["Rajdhani-Light", "sans-serif"],
      rMedium: ["Rajdhani-Medium", "sans-serif"]
    }
    
  },
  plugins: [],
}

and I’ve also attached an image of my folder structure:screenshot

if I replace rSemiBold with rBold, then it will work as intended, but any of the other members of the font family do not. I’ve tried messing around with the config file by adding single quotes around my custom font names or inside the double quotes but nothing has worked. The file names are correct too and I checked the ttf files to make sure there was nothing wrong with them

Tags:

2

Answers


  1. 0

    You need to import the fonts using the useFonts hook from expo in your _layout.tsx file, perhaps you can share a snapshot of your layout file

    Login or Signup to reply.
  2. 0

    To ensure your custom Rajdhani fonts work correctly in your React Native app using Tailwind CSS, you need to follow several key steps. Here’s a comprehensive guide to resolving the issue:

    Step 1: Load Fonts Using Expo Font

    In your index.js or the main entry point of your app, use the useFonts hook from expo-font to load your custom fonts. Ensure the font files are located in the correct directory within your project.

    expo install expo-font

    Here’s an updated version of your index.js file:

    import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { useFonts } from 'expo-font';
import { Link } from 'expo-router';
import AppLoading from 'expo-app-loading';

export default function App() {
  let [fontsLoaded] = useFonts({
    'Rajdhani-Regular': require('./assets/fonts/Rajdhani-Regular.ttf'),
    'Rajdhani-Bold': require('./assets/fonts/Rajdhani-Bold.ttf'),
    'Rajdhani-SemiBold': require('./assets/fonts/Rajdhani-SemiBold.ttf'),
    'Rajdhani-Light': require('./assets/fonts/Rajdhani-Light.ttf'),
    'Rajdhani-Medium': require('./assets/fonts/Rajdhani-Medium.ttf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-3xl font-rSemiBold">Test test</Text>
      <StatusBar style="auto" />
      <Link href="/sign-in" style={{ color: 'blue' }}>Proceed to Login</Link>
    </View>
 );
}

    Step 3: Ensure Tailwind Configuration is Correct

    Ensure that your Tailwind CSS configuration properly maps to the fonts you loaded. Here’s your tailwind.config.js with the correct font names:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*. 
  {js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#D0E358'
      }
    },
    fontFamily: {
      rRegular: ["Rajdhani-Regular", "sans-serif"],
      rBold: ["Rajdhani-Bold", "sans-serif"],
      rSemiBold: ["Rajdhani-SemiBold", "sans-serif"],
      rLight: ["Rajdhani-Light", "sans-serif"],
      rMedium: ["Rajdhani-Medium", "sans-serif"]
    }
  },
  plugins: [],
}

    Step 4: Verify Font File Paths

    Double-check that the paths to your font files are correct. They should be relative to the location of your index.js file or where you are importing them.

    For example, if your fonts are in the assets/fonts directory, ensure the paths are correctly referenced like this:

    'Rajdhani-Regular': require('./assets/fonts/Rajdhani-Regular.ttf')

    Step 5: Restart Your Development Server

    After making these changes, restart your development server to ensure all changes are picked up:

    expo start -c

    Additional Troubleshooting

    • File Names and Extensions: Ensure the file names and extensions are correct. Sometimes, even a small typo can cause the font not to load.
    • Font Weights and Styles: Confirm that the Rajdhani font family indeed has the weights and styles you are trying to use (Regular, Bold, SemiBold, Light, Medium).

    Final Check

    After following these steps, your custom fonts should load correctly. You can verify this by checking if all different styles (Regular, Bold, SemiBold, Light, Medium) are displayed as expected in your app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search