Tutorial : How to globally add or embed custom fonts using expo-font and twrnc

[tomihbk]

Prerequisite

• Using create-expo-app
• Using twrnc
• Have EAS Dev build (Custom fonts don't work on Expo Go app)

Installation and configuration

npx expo install expo-font

Inside app.json

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            "./assets/fonts/Inter-Black.ttf",
            "./assets/fonts/Inter-BlackItalic.ttf"
          ]
        }
      ]
    ]
  }
}

Inside tailwind.config.js

module.exports = {
  content: [`**/*.{js,ts,jsx,tsx}`],
  theme: {
    extend: {
    },
    fontFamily: {
      "Inter-Black": ["Inter-Black"],
      "Inter-BlackItalic": ["Inter-BlackItalic"]
    },
  },
  plugins: [],
};

Create custom twrnc config file

Create tw.config.js at parent level and it should contain

import { create } from 'twrnc';

const tw = create(require('./tailwind.config')); // <- your path may differ

export default tw;

Building the app through Expo EAS or Locally

Build your app using expo eas : https://docs.expo.dev/develop/development-builds/create-a-build/
If you have a mac or linux, you can also build locally by using --local, they don't support windows sadly

Using the new font

First is to import your custom config file

import tw from '~/tw.config'

import tw from 'twrnc' <-- Don't use the default import

<Text style={tw`font-Inter-Black`}>The typeface is called Inter</Text>

<Text style={tw`font-bold font-Inter-Black`}>This will not work because of the font-bold class, so remove it</Text>