Custom Fonts

The library bundles DancingScript, OpenSans, and NotoSans 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
NotoSans	Regular, Medium, Bold	Multilingual UI text — Myanmar and Thai glyph sets included

Locale-Aware Font Loading

NotoSans automatically switches glyph sets based on the active locale. The same "fontFamily": "NotoSans" entry in your theme.json resolves to:

Active language	Font loaded
en (and any other)	NotoSans (Latin)
my	NotoSans Myanmar
th	NotoSans Thai

No extra configuration is needed — the theme system reads the current language from LocalizationContext at runtime.

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 for display/branding
<Typography type="display" weight="bold">
  Brand Name
</Typography>

// NotoSans (or OpenSans) for UI text — switches glyph set automatically
<Typography type="body">
  Regular content
</Typography>

Direct Style Access

const { fonts } = useTheme();

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

<Text style={fonts.body.regular}>
  {/* NotoSans regular — Myanmar glyphs when language is 'my' */}
</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": "NotoSans", "fontSize": 20 },
      "medium": { "fontFamily": "NotoSans", "fontSize": 20 },
      "bold": { "fontFamily": "NotoSans", "fontSize": 20 }
    },
    "body": {
      "regular": { "fontFamily": "NotoSans", "fontSize": 14 },
      "medium": { "fontFamily": "NotoSans", "fontSize": 14 },
      "bold": { "fontFamily": "NotoSans", "fontSize": 14 }
    }
  }
}

Valid fontFamily values: "DancingScript", "OpenSans", "NotoSans".

Adding Custom Fonts

To add your own fonts outside the built-in set, use inline styles with expo-font:

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