Skip to content

Instantly share code, notes, and snippets.

@vincicat
Last active August 19, 2025 21:50
Show Gist options
  • Save vincicat/ceb64cdd79f2e1cba32501451bd0e53b to your computer and use it in GitHub Desktop.
Save vincicat/ceb64cdd79f2e1cba32501451bd0e53b to your computer and use it in GitHub Desktop.
React-Native Custom Font, the native and non-native way.

Before RN < 0.69 You just using react-native.config.js and also npx react-native link, but they are no longer supported.

* You can still use react-native link-assets but it requires extra package now: @react-native-community/cli-link-assets

Current workaround is to go native...

Common Setup

You need to use fontdrop.info or Font Book.app to find the correct font family name

iOS

Follow the offical doc: Adding a Custom Font to Your App

You can copy or link to your file as long as the XCode can find the file. remember to edit the info.plist

Android

This one is more tricky: you have 2 places that can style with font-family but they require their own setup.

Android XML

Android XML is responsible for App theme and also native components theme (e.g. spinner used by react-native-picker)

Android XML won't load RN default assets folder (android/app/src/main/assets/fonts), any font-family in theming XML has to be defined in Android Font XML [doc] or can be referred in "@font/{filename without extension}" (File-based resource)

The filename must only contain lowercase alphabet, number and underscore (no space or hyphen)

Android JS bundle

the fonts required in JS bundle in your app need to be placed in android/app/src/main/assets/fonts, using format "{FONT_FAMILY_NAME (space & other symbol allowed)}\_{style}.{FILEEXT}"

if you need to place in other location, check react-native-asset or @react-native-community/cli-link-assets

Ceveats

If you setup them correctly the font is ready to use in StyleSheet in RN.

REMARKS: defaultProps has been removed in react 19 === react native 0.80, that mean you either write your own Text Wrapper or use react-native-element etc to feed your default font setting into the components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment