You can use the FONT_SIZE object to define the size of the fonts.

1

First, go to the assets/fonts folder.

2

Add your custom fonts there.

3

Then, go to the constants/AppConstants.ts file.

4

Define your custom fonts there. Like below:

constants/AppConstants.ts
export const FONT_SIZE: Record<FontSize, number> = {
xxxs: moderateScale(6),
... 
};
export const FONT: Record<Font, string> = {
// Implement your custom fonts here:
// It is really easy to use with this way.
sm: 'SpaceMono-Regular',
};
5

Finally, you can use the FONT_SIZE and FONT objects to style your fonts. Like below:

components/Text.tsx
const styles = StyleSheet.create({
  text: {
    fontFamily: FONT.sm,
    fontSize: FONT_SIZE.sm,
  },
});
6

Make sure your app/_layout.tsx file includes the fontFamily prop. Like below:

app/_layout.tsx
const [loaded] = useFonts({
  SpaceMono-Regular: require('@/assets/fonts/SpaceMono-Regular.ttf'),
  // Add more fonts here if needed
});

I am using my custom fonts like that and it is really easy to use.

Was this page helpful?

ThemingPostHog