Expo Font provides comprehensive font loading and management capabilities for React Native and Expo applications. It enables dynamic loading of custom fonts at runtime with cross-platform support for iOS, Android, and web, offering both programmatic APIs and React hooks for seamless integration.
npm install expo-fontimport { loadAsync, isLoaded, useFonts, FontDisplay, type RenderToImageOptions, type RenderToImageResult } from "expo-font";
import { Asset } from "expo-asset";For CommonJS:
const { loadAsync, isLoaded, useFonts, FontDisplay } = require("expo-font");
const { Asset } = require("expo-asset");import { loadAsync, useFonts } from "expo-font";
// Method 1: Using loadAsync directly
await loadAsync({
'Inter-Regular': require('./assets/fonts/Inter-Regular.otf'),
'Inter-Bold': require('./assets/fonts/Inter-Bold.otf'),
});
// Method 2: Using React hook
function MyComponent() {
const [fontsLoaded, error] = useFonts({
'Inter-Regular': require('./assets/fonts/Inter-Regular.otf'),
'Inter-Bold': require('./assets/fonts/Inter-Bold.otf'),
});
if (error) throw error;
if (!fontsLoaded) return <LoadingScreen />;
return (
<Text style={{ fontFamily: 'Inter-Regular' }}>
Hello with custom font!
</Text>
);
}Expo Font is built around several key components:
Core font loading functionality for loading fonts from various sources including local assets, remote URLs, and embedded resources.
function loadAsync(
fontFamilyOrFontMap: string | Record<string, FontSource>,
source?: FontSource
): Promise<void>;
function isLoaded(fontFamily: string): boolean;
function isLoading(fontFamily: string): boolean;
function getLoadedFonts(): string[];React hooks for integrating font loading into component lifecycles with automatic state management and error handling.
function useFonts(
map: string | Record<string, FontSource>
): [boolean, Error | null];Utility functions for advanced font operations including text rendering to images.
function renderToImageAsync(
glyphs: string,
options?: RenderToImageOptions
): Promise<RenderToImageResult>;Server-side rendering support with static font registration and resource management.
function getServerResources(): string[];
function resetServerContext(): void;
function registerStaticFont(fontFamily: string, source?: FontSource | null): void;type FontSource = string | number | Asset | FontResource;
interface FontResource {
uri?: string | number;
display?: FontDisplay;
default?: string;
}
enum FontDisplay {
AUTO = 'auto',
SWAP = 'swap',
BLOCK = 'block',
FALLBACK = 'fallback',
OPTIONAL = 'optional'
}
type UnloadFontOptions = Pick<FontResource, 'display'>;
interface RenderToImageOptions {
fontFamily?: string;
size?: number;
color?: string;
}
interface RenderToImageResult {
uri: string;
width: number;
height: number;
}
// From expo-asset dependency
interface Asset {
name: string;
type: string;
hash?: string;
uri: string;
localUri?: string;
}