Skip to main content

​
Swapping Fonts at Runtime

Fonts can be loaded dynamically at runtime. This allows you to localize your Rive content without increasing the file size of the exported .riv file. For more information, see Loading Assets.

​
Fallback Fonts

When rendering text, not all glyphs (characters) may be available in the active font. This commonly occurs when:
  • Using custom fonts that don’t support all languages or Unicode ranges
  • The embedded font is a subset of the font
  • User-generated or dynamic text contains unexpected characters
A fallback font is used automatically when the primary font cannot render a specific glyph. These are typically system fonts, which generally provide broad Unicode coverage.
On iOS and Android, font sizes specified for fallback fonts are ignored. Instead, the platform selects system fonts that best match the styling and animation of the text run at runtime.

View the full example

See the complete fallback font example used in the React Native sample app.

​
Loading fallback fonts

Fallback fonts can come from:
  • a bundled native asset
  • a remote URL
  • a system font by name
import { RiveFonts } from '@rive-app/react-native';

// Bundled native font
const bundled = await RiveFonts.loadFont('kanit_regular.ttf');

// Remote font
const remote = await RiveFonts.loadFont({
    uri: 'https://raw.githubusercontent.com/google/fonts/main/ofl/kanit/Kanit-Regular.ttf',
});

// System font by name
const system = await RiveFonts.loadFont({ name: 'Thonburi' });

​
Setting fallback fonts

Call RiveFonts.setFallbackFonts() before mounting the Rive view. 
await RiveFonts.setFallbackFonts({
    default: [
        bundled,
        remote,
        RiveFonts.systemFallback(),
    ],
});

​
Clearing fallback fonts

To remove previously configured fallback fonts, call: 
await RiveFonts.clearFallbackFonts();
This is useful if your app needs to fully reset font configuration before recreating a RiveView.