Fonts

Fonts for Ferrule, a React Native UI library for iOS, Android and web. The system font by default, and every place you can set your own.

No font install is required: the default is each platform's system font, on every platform. A custom font is an optional brand step, and you are responsible for its license.

With the system font, sizes and heights match but text widths do not, since each platform has its own font. To match exactly, load one font in your app and name each weight:

tokens: { fontFamily: { regular: 'Inter_400Regular', medium: 'Inter_500Medium', semibold: 'Inter_600SemiBold', bold: 'Inter_700Bold' } }

Each weight gets its own family because Android cannot synthesize weights for custom fonts. How to load the font is up to your app. The example app uses expo-font, and bare apps can link font files with react-native-asset.

Other places to set a font

Only the theme's weights are mapped to families. Set a font for one case in any of these:

One text variant, in the theme:

components: { text: { h2: { fontFamily: 'Caveat_700Bold' } } }

One part of the app. A nested provider replaces the fonts for everything inside it:

<FerruleProvider theme={monoTheme}>...</FerruleProvider>

One piece of text:

<Text style={{ fontFamily: 'Caveat_700Bold' }}>...</Text>

Italics need a one-off family. There is no italic token, so fontStyle: 'italic' on a custom font is not mapped to its italic file. Name it directly: <Text style={{ fontFamily: 'Lora_400Regular_Italic' }}>.

Name every weight you render. In development, text at a weight with no family warns once and uses the system font.

On Android, fontWeight is dropped when the family is custom, because a bold weight on a font bundled as a native asset falls back to a system font. System families such as serif keep their weight.

Native controls

Native variants use the theme's fonts where the OS allows, with no extra setup, and stay on the system font with no custom font in the theme. Dynamic Type and Android font scaling still apply, and a font that failed to load falls back to the system font. The coverage table lists which controls can't.