Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

Fonts

When you want to use a specific font in your application, you have to follow two steps to make it work.
  1. Step
    1
    :
    Load the font in your application
  2. Step
    2
    :
    Apply the font in your application

Loading fonts

For this section, we will focus on loading fonts from Google

For Expo projects

To load Google fonts in Expo, we have to install expo-font & follow following steps:
  1. Step
    1
    :
    Install expo-font package.
npx expo install expo-font
  1. Step
    2
    :
    Import useFonts function from expo-font package.
import { useFonts } from 'expo-font';
  1. Step
    3
    :
    Install the font you want to use from expo-google-fonts in your application, for example, Inter font.
npx expo install @expo-google-fonts/inter
  1. Step
    4
    :
    Import the font from expo-google-fonts package, for example, Inter font.
Check this for all the available fonts.
import {
Inter_400Regular,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
Inter_900Black, } from "@expo-google-fonts/inter";
  1. Step
    5
    :
    Load the font in your application.
const [fontsLoaded] = useFonts({
Inter_400Regular,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
Inter_900Black,
})
To load local-fonts in Expo application, we have to follow following steps:
  1. Step
    1
    :
    Download the font files and add them to the assets folder.
  2. Step
    2
    :
    Install expo-font package.
npx expo install expo-font
  1. Step
    3
    :
    Import useFonts function from expo-font package.
import { useFonts } from 'expo-font';
  1. Step
    4
    :
    Load the font in your application.
const [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});

For Next.js projects

To load google-fonts in Next.js application, we have to follow following steps:
  1. Step
    1
    :
    Go to Google Fonts and select the font you want to use in your application.
  2. Step
    2
    :
    Click on the font and select the font weight and style you want to use.
  3. Step
    3
    :
    Click on the + icon to add the font to your project.
  4. Step
    4
    :
    Click on the Select this style button.
  5. Step
    5
    :
    Click on the Embed button.
  6. Step
    6
    :
    Copy the @import link and paste it in the global.css file in the styles folder. or Copy the style link embeds and paste it in the Head tag in the _document.tsx or index.tsx file.
To load local-fonts in Next.js application, we have to follow following steps:
  1. Step
    1
    :
    Download the font files and add them to the public/assets folder.
  2. Step
    2
    :
    Add the css to attach font files to the font family in the global.css file in the styles folder.
@font-face {
font-family: 'inter';
src: url('/assets/inter/Inter-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'inter';
src: url('/asset/inter/Inter-Bold.ttf');
font-weight: bold;
font-style: normal;
}

Applying fonts in your application

You already have the font loaded in your application, now you can apply the font in your application. Add the font name in the gluestack.config.js file in the fonts object. If you are confused where to find the fonts config object? Please go through this documentation (specifically the typography section).
fonts: {
heading: "inter", // Heading component uses this by default
body: "inter", // Text component uses this by default
mono: "monospace",
},

Advanced concepts for fonts in gluestack-ui

In gluestack-ui, components are styled using styled provided by @gluestack-style/react package, check here This package provides a simple way to use fonts using the FontResolver plugin.
import { FontResolver } from '@gluestack-style/react';
// const fontMapper = (style: any) => {
// };
export const config = {
aliases: {},
tokens: {},
plugins: [
new FontResolver({
// mapFonts: fontMapper,
}),
],
};
const StyledText = styled(Text, {
fontFamily: 'Inter',
fontWeight: 400,
fontStyle: 'regular',
fontSize: '$xl',
});
You can use the styled function to style your components. For gluestack-ui components, we have used this styled function to style the components.
Similarly, we can pass font styles to any component and then use the returned component (with font styles added).