Skip to main content
Version: v4

Font Family


Please refer to the

documentation on the Tailwind CSS website

React Native loads fonts differently between iOS and Android. We recommend following to use fonts that work consistently on all platforms and allow you to use Tailwind CSS as expected.

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


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.

import { platformSelect } from "nativewind/theme";

module.exports = {
theme: {
extend: {
fontFamily: {
example: ["ExampleFontFamily"],
system: platformSelect({
ios: "Georgia",
android: "sans-serif",
default: "ui-sans-serif",


font-sans✅ Full Support
font-serif✅ Full Support
font-mono✅ Full Support
font-[n]✅ Full Support
font-{n}✅ Full Support


-{n} Supports values from theme

-[n] Supports arbitrary values


✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only