Skip to content

Changing typography

Swapping the font family and scale.

Fonts load in `app/_layout.tsx` with `useFonts`. Drop your font files into `assets/fonts`, register them there, and update the family names in the theme.

const [loaded] = useFonts({
  "YourFont-Regular":  require("../assets/fonts/YourFont-Regular.ttf"),
  "YourFont-Medium":   require("../assets/fonts/YourFont-Medium.ttf"),
  "YourFont-SemiBold": require("../assets/fonts/YourFont-SemiBold.ttf"),
});

if (!loaded) return null;

Keep the scale

The type scale in the theme is what holds the screens together. Change the family freely, but change sizes as a set rather than per screen.

Changing typography — Documentation — Custom Theme