Font Family

Usage

Please refer to the

documentation on the Tailwind CSS website

React Native loads fonts slightly differently between iOS and Android. We recommend following https://github.com/jsamr/react-native-font-demo to create a consistent experience that works better with Tailwind.

Differences on Native

React Native does not support fallback fonts. If an array of fonts are provided, NativeWind will only use the first font.

Adding fonts to your theme

info

NativeWind will not load/link fonts into your app. If you have any issues with the font family or weights not rendering, please first verify it works with inline styles.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        example: ["ExampleFontFamily"],
      },
    },
  },
};

Compatibility

Class	Native (StyleSheet)	Web (CSS)
font-[n]	✅	✅
font-{n}	✅	✅
font-sans	❌	✅
font-serif	❌	✅
font-mono	❌	✅

Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support

❌ Not supported