Fonts & Typography
Fonts are defined in app/theme/typography.ts
. We use a similar approach to colors, defining a set of fonts and then using those fonts to define semantic font names to be used throughout the app. This allows us to have a consistent font usage across the app, and also allows us to change the fonts easily.
Fonts
We define the fonts used in app/theme/typography.ts
. The custom fonts are loaded using the useFonts
hook from expo-fonts
to load the fonts.
To add additional custom fonts to your project, obtain the proper OTF/TTF file(s) or install the desired Google Font package. Make the necessary additions to the customFontsToLoad
object in app/theme/typography.ts
and fonts
object to reference the font family in the typography theming object.
export const customFontsToLoad = {
spaceGroteskLight,
spaceGroteskRegular,
spaceGroteskMedium,
spaceGroteskSemiBold,
spaceGroteskBold,
myCustomFont: require("./assets/fonts/custom-font.otf"),
}
const fonts = {
// ...
myCustomFont: {
normal: "myCustomFont",
},
}
Keep in mind that when utilizing custom fonts, it is a better user experience to wait on rendering anything within the app until the fonts are loaded (this will prevent any text from changing in front of the user's eyes). This functionality is baked into Ignite for you! Check out app/app.tsx
to see it in action.
Typography
Since we use the Text
component to encapsulate almost all text within an ignite app, the semantic names are essentially presets. As with all presets, they should only be created where there's a consistent pattern of usage across the app. To do this you'd add a new preset to the Text
component with the associated styles. For one-off cases, it's recommended to use the size
and weight
props on the Text
component.