Skip to main content

Custom Fonts

The design system includes DancingScript and OpenSans fonts. Here's how to use them effectively.

Included Fonts​

FontWeightsUsage
DancingScriptRegular, Medium, BoldDisplay text, branding
OpenSansRegular, Medium, BoldUI text, body content

Font Loading​

Fonts are automatically loaded by MultinaireDesignProvider. The provider shows nothing until fonts are loaded:

<MultinaireDesignProvider theme={theme}>
  {/* App renders only after fonts load */}
</MultinaireDesignProvider>

Using Fonts​

With MultinaireText​

// DancingScript is used for 'display' type
<MultinaireText type="display" weight="bold">
  Brand Name
</MultinaireText>

// OpenSans is used for all other types
<MultinaireText type="body">
  Regular content
</MultinaireText>

Direct Style Access​

const { fonts } = useMultinaireTheme();

<Text style={fonts.display.bold}>
  {/* Uses DancingScript-bold */}
</Text>

<Text style={fonts.body.regular}>
  {/* Uses OpenSans-regular */}
</Text>

Font Configuration​

Configure fonts in your theme.json:

{
  "texts": {
    "display": {
      "regular": { "fontFamily": "DancingScript", "fontSize": 24 },
      "medium": { "fontFamily": "DancingScript", "fontSize": 24 },
      "bold": { "fontFamily": "DancingScript", "fontSize": 24 }
    },
    "heading": {
      "regular": { "fontFamily": "OpenSans", "fontSize": 20 },
      "medium": { "fontFamily": "OpenSans", "fontSize": 20 },
      "bold": { "fontFamily": "OpenSans", "fontSize": 20 }
    }
  }
}

Adding Custom Fonts​

To add your own fonts:

  1. Currently not supported - The design system only supports DancingScript and OpenSans
  2. Fork the library if you need custom fonts
  3. Or use inline styles for occasional custom font usage:
import { useFonts } from 'expo-font';

function App() {
  const [fontsLoaded] = useFonts({
    'MyCustomFont': require('./assets/fonts/MyCustomFont.ttf'),
  });

  return (
    <Text style={{ fontFamily: 'MyCustomFont' }}>
      Custom font text
    </Text>
  );
}

Web Considerations​

On web, ensure fonts are preloaded to avoid FOUT (Flash of Unstyled Text):

<link rel="preload" href="/fonts/OpenSans-Regular.ttf" as="font" crossorigin>

Troubleshooting​

Fonts not loading​

  1. Ensure MultinaireDesignProvider wraps your app
  2. Check that expo-font is installed
  3. Clear Metro cache: npx expo start --clear

Wrong font appearing​

  1. Check the fontFamily in your theme.json
  2. Verify weight matches: 'regular', 'medium', or 'bold'
  3. Ensure the type/weight combination exists in your theme