Fonts

1. Step

   1

   :

   Load the font in your application
2. Step

   2

   :

   Apply the font in your application

Loading fonts

For Expo projects

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.

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,
})

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

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.

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

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

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',
});