> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fonts

> Customize your app fonts

<Frame>
  <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/header/fonts.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=7a9e12a1fb23b74dcde7aaf7b277391a" alt="Fonts" className="w-full h-full rounded-xl" width="700" height="320" data-path="images/header/fonts.png" />
</Frame>

<Tip>
  You can use the `FONT_SIZE` object to define the size of the fonts.
</Tip>

<Steps>
  <Step>
    First, go to the `assets/fonts` folder.

    <img src="https://mintcdn.com/shipmobilefast-51a499dc/4ztR-scAO2Zjz6Y6/images/font1.png?fit=max&auto=format&n=4ztR-scAO2Zjz6Y6&q=85&s=c3258c5f4f3f45a8cdadf7d774138661" alt="Fonts" className="max-w-[300px] rounded-2xl" width="227" height="70" data-path="images/font1.png" />
  </Step>

  <Step>
    Add your custom fonts there.
  </Step>

  <Step>
    Then, go to the `constants/AppConstants.ts` file.
  </Step>

  <Step>
    Define your custom fonts there. Like below:

    ```javascript constants/AppConstants.ts {16} theme={null}
    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',
    };
    ```
  </Step>

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

    ```javascript components/Text.tsx {3-4}  theme={null}
    const styles = StyleSheet.create({
      text: {
        fontFamily: FONT.sm,
        fontSize: FONT_SIZE.sm,
      },
    });
    ```
  </Step>

  <Step>
    Make sure your app/\_layout.tsx file includes the `fontFamily` prop. Like below:

    ```javascript app/_layout.tsx {2} theme={null}
    const [loaded] = useFonts({
      SpaceMono-Regular: require('@/assets/fonts/SpaceMono-Regular.ttf'),
      // Add more fonts here if needed
    });
    ```
  </Step>
</Steps>

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