Fonts

With Expo, you can load fonts dynamically using the expo-font library. With this approach, you need to wait for the font to load before showing or hiding your splash screen. In the starter, we are using @bacons/link-assets to link our custom fonts in the build phase.

To add a custom font you only need to put the font file in the assets/fonts and update the expo config by adding the exact file path to @bacons/link-assets config like the following:

import type { ConfigContext, ExpoConfig } from '@expo/config';

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  plugins: [['@bacons/link-assets', ['./assets/fonts/Inter.ttf']]],
});

Next, Make sure to add your new font to Tailwind CSS config to use it with classname

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

More details about adding fonts with Tailwind CSS can be found in the Nativewind documentation.