Add expo google fonts by nativewind or tailwind

Question

Hello I am using Expo to develop an app, & for font I am using expo-google-fonts for font, and using NativeWind for styling, Now I want to configure expo-google-fonts in Native wind,

I have tried this,

import { StatusBar } from 'expo-status-bar';
import { View, Text } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, JosefinSans_500Medium } from '@expo-google-fonts/josefin-sans';


export default function App() {
  let [fontsLoaded] = useFonts({
    JosefinSans_500Medium,
  });

  if (!fontsLoaded)
    return null;
  return (
    <View className="flex-1 items-center justify-center h-full w-full">
      <Text style={{ fontFamily: 'JosefinSans_500Medium', fontSize: 20}}>This work fine</Text>
      <Text className="font-josefin text-xl mt-2">This is not working</Text>
      <StatusBar style="auto" />
    </View>
  );
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}", 
    "./screens/*.{js,jsx,ts,tsx}",
    "./components/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'red-700': '#BF2F28',
        'red-600': '#D84942',
        'red-500': '#E0726D',
        'red-400': '#E99B97',
        'red-300': '#F2C3C1',
      },
      fontFamily: {
        josefin: ["JosefinSans_500Medium"]
      },
    },
  },
  plugins: [],
}

Output

Answer 1

1. Setup https://www.nativewind.dev/quick-starts/expo and make sure you can use tailwind style

2. Setup fonts

_layout.tsx

import {
  useFonts,
  Inter_100Thin,
  Inter_900Black,
} from '@expo-google-fonts/inter'
import { SplashScreen, Stack } from 'expo-router'
import { NativeWindStyleSheet } from 'nativewind'

// For Web platform
NativeWindStyleSheet.setOutput({
  default: 'native',
})
export default function Layout() {
  const [fontsLoaded] = useFonts({
    interThin: Inter_100Thin, // <- mapping key
    Inter_900Black, // <- equivalent to Inter_900Black: Inter_900Black
  })

  if (!fontsLoaded) {
    return <SplashScreen />
  }

  // Render the children routes now that all the assets are loaded.
  return <Stack />
}

tailwind.config.ts

module.exports = {
  content: ['./components.{js,jsx,ts,tsx}', './app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        interThin: ['Inter_100Thin'],
        Inter_900Black: ['Inter_900Black'],
      },
    },
  },
}

index.tsx

import { View, Text } from 'react-native'

export default function Home() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text className="font-interThin text-xl">font-interThin</Text>
      <Text className="font-Inter_900Black text-xl">font-Inter_900Black</Text>
    </View>
  )
}

** After mapping the fonts in tailwind.config.ts please try to re-run yarn ios or yarn android

** special step for website

Add code to App or _layout for expo filebase router reference to https://github.com/marklawlor/nativewind/issues/470

import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  default: "native",
});

I hope this will help you

Answer 2

Try replace

fontFamily: {
    josefin: ["JosefinSans_500Medium"]
}

with

fontFamily: {
    sans: ["JosefinSans"]
}

And use the font-sans class

 <Text className="font-sans text-xl mt-2">This is not working</Text>