Font Family

Class	Properties
t.fontSans	fontFamily: '-apple-system'
t.fontSerif	fontFamily: 'Georgia'
t.fontMono	fontFamily: 'Menlo'

Sans-serif

Use t.fontSans to apply a web safe sans-serif font family:

I'm a sans-serif paragraph.

Serif

Use t.fontSerif to apply a web safe serif font family:

I'm a serif paragraph.

Monospaced

Use t.fontMono to apply a web safe monospaced font family:

I'm a monospaced paragraph.

Custom fonts

When you want to add custom fonts to a react-native project you need to collect them in a folder inside your project directory. (e.g.: /App/Fonts/Custom-Font.ttf)

Add this folder path to your react-native.config.js file.

// react-native.config.js

module.exports = {
  assets: ['./App/Fonts'],
};

Link the assets in react-native with:

react-native link

Now you can add the filename of the fonts in your tailwind.config.js file like this to use them with react-native-tailwindcss.

// tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      calibre: [
        'Calibre-Regular'
      ],
      calibreMedium: [
        'Calibre-Medium'
      ],
      calibreBold: [
        'Calibre-Bold'
      ],
    }
  }
}

When you add style to a <Text> tag, you can set the font-family like this. (e.g.: t.fontCalibre)