Skip to content


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 => ({
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: [],

As we are linking font natively you need to run expo prebuild and then expo ios or expo android to use the new font.

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