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.
import { FontResolver } from '@gluestack-style/react';
plugins: [new FontResolver()],
Below is an example of an original styled object that will be processed by mapFonts
fontFamily: 'Nunito Sans',
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' 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
fontFamily: 'NunitoSans_800ExtraBold_Italic',
Example:
const StyledText = styled(Text, {
fontFamily: "Nunito Sans",
<Provider config={config}>
<StyledText>Hello world</StyledText>
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.
const CustomFontResolver = new FontResolver({
if (Platform.OS !== 'web') {
style.fontFamily + '-' + style.fontWeight + '-' + style.fontStyle;
style.fontWeight = undefined;
style.fontStyle = undefined;
plugins: [CustomFontResolver],