Adding new typefaces

SpiroKit uses Poppins as default typeface, but you can add as many custom fonts as you need. Let's add support for the Inter typeface in 3 simple steps:

1. Download the font you want
2. Load the font in your app
3. Declare your new font within SpiroKit's Theme object.
4. Set your font as default for headings or body texts

First, we need to download the font we want. I personally recommend using the amazing @expo-google-fonts package for that.

Here's the Inter package link.

Then, you'll need to load the font using the useFonts hook:

import {
  useFonts,
  Inter_300Light,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold
} from "@expo-google-fonts/inter"

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter_Light: Inter_300Light,
    Inter: Inter_400Regular,
    Inter_Medium: Inter_500Medium,
    Inter_SemiBold: Inter_600SemiBold,
    Inter_Bold: Inter_700Bold,
    Inter_ExtraBold: Inter_800ExtraBold
  })

  if(!fontsLoaded) return <></>

  return (
      ...
  )
}

We need to add the new font to the SpiroKit's Theme object, so you can use it everywhere through the fontFamily prop:

Please note that you need to at least add the 'regular' style for each custom font. In the following example, We will also add other styles like light, semiBold, bold, etc.

const theme = useSpiroKitTheme({
  resources: {
    fonts: {
      Inter: {
        light: {
          normal: "Inter_Light",
        },
        // This is required
        regular: {
          normal: "Inter",
        },
        medium: {
          normal: "Inter_Medium",
        },
        semiBold: {
          normal: "Inter_SemiBold",
        },
        bold: {
          normal: "Inter_Bold",
        },
        extraBold: {
          normal: "Inter_ExtraBold",
        },
      },
    },
  },
});

export default function App() {
  // Load the font here

  return <SpiroKitProvider theme={theme}>...</SpiroKitProvider>;
}

Finally, you can optionally setup your new font as default font for heading components (LargeTitle, TitleOne, TitleTwo, TitleThree) and body components (Body, Subhead, Footnote, Caption)

const theme = useSpiroKitTheme({
  config: {
    fonts: {
      body: "Inter",
      heading: "Inter"
    }
  },
  resources: {
    ...
  }
});