---
title: Fonts Plugin | gluestack-style
description: gluestack-style provides a Plugin to unify font family styles across platforms.
canonical: https://gluestack.io/style
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Text } from 'react-native';
import { StyledProvider, styled, FontResolver } from '@gluestack-style/react';
import { config } from '../../components/nb.config';
import { AppProvider, CodePreview } from '@gluestack/design-system';

<Meta title="plugins/Fonts Plugin" />

# Fonts Plugin

The font plugin, a utility for the styled function, provides a unified way to pass font families to your styles. It lets you specify a styled object with fontFamily, fontWeight, and fontStyle properties.

## Usage:

Include the `FontResolver` plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor.

```js
import { FontResolver } from '@gluestack-style/react';

export const config = {
  aliases: {},
  tokens: {},
  plugins: [new FontResolver()],
};
```

Below is an example of an original styled object that will be processed by mapFonts

```js
{
  fontFamily: 'Nunito Sans',
  fontWeight: 800,
  fontStyle: 'italic',
}
```

The `mapFonts` function is responsible for merging font styles in a unified format, based on the specified strategy. The strategy is determined by the `STYLE_FONT_RESOLVER_STRATEGY` environment variable, which can be set to either `expo` or `web`.

If the strategy is set to 'expo', the function will adhere to the ['expo-google-fonts'](https://github.com/expo/google-fonts/tree/master/font-packages/dev#readme) naming convention. This involves removing any spaces from the fontFamily property, concatenating the fontWeight property with the corresponding weight name (e.g., '800ExtraBold'), and capitalizing the first letter of the fontStyle property.If the strategy is set to 'web', the function will adhere to a web naming convention. In either case, the `mapFonts` function will merge the font styles into a unified format that can be used by the application.

Below is an example of a resolved fonts object

```js
{
  fontFamily: 'NunitoSans_800ExtraBold_Italic',
}
```

### Example:

<AppProvider>
  <CodePreview
    showArgsController={false}
    metaData={{
      scope: {
        FontResolver,
        Text,
        Provider: StyledProvider,
        config,
        styled,
      },
      code: `
      function App () {
        const StyledText = styled(Text, {
          fontFamily: 'Nunito Sans',
          fontWeight: 800,
          fontStyle: 'italic',
          fontSize: '$xl',
          color: '$black',
          _dark: {
            color: '$white'
          },
        });
        return (
         <Provider config={config}>
            <StyledText>
              Hello world
            </StyledText>
          </Provider>
        );
      }
      `,
    }}/>

</AppProvider>

<br />

## mapFonts:

To use a different naming convention for your fonts, provide a custom mapFonts function to the font plugin constructor and pass it inside the config.

```js
const CustomFontResolver = new FontResolver({
    mapFonts: (style) => {
      if (Platform.OS !== 'web') {
        style.fontFamily =
          style.fontFamily + '-' + style.fontWeight + '-' + style.fontStyle;
        style.fontWeight = undefined;
        style.fontStyle = undefined;
      }
    },
}),

export const config = {
  aliases: {},
  tokens: {},
  plugins: [CustomFontResolver],
};
```
