Skip to main content
Fonts
You can use the FONT_SIZE object to define the size of the fonts.
1
First, go to the assets/fonts folder.Fonts
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.