Custom Fonts

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

Included Fonts

Font	Weights	Usage
DancingScript	Regular, Medium, Bold	Display text, branding
OpenSans	Regular, Medium, Bold	UI text, body content

Font Loading

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

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

Using Fonts

With Typography

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

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

Direct Style Access

const { fonts } = useTheme();

<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 library 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 MultinaireUI 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