or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

font-loading.mdfont-utils.mdindex.mdreact-hooks.mdserver-side.md
tile.json

tessl/npm-expo-font

Load fonts at runtime and use them in React Native components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/expo-font@14.0.x

To install, run

npx @tessl/cli install tessl/npm-expo-font@14.0.0

index.mddocs/

Expo Font

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.

Package Information

  • Package Name: expo-font
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install expo-font
  • Platform Support: iOS, Android, Web

Core Imports

import { 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");

Basic Usage

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>
  );
}

Architecture

Expo Font is built around several key components:

  • Font Loading Engine: Core loading mechanism with platform-specific implementations
  • Cache Management: In-memory font tracking and state management
  • React Integration: Hooks-based API for component-level font loading
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Cross-Platform: Unified API with platform-specific optimizations
  • Server-Side Rendering: Static font registration for SSR scenarios

Capabilities

Font Loading

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[];

Font Loading

React Hooks

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];

React Hooks

Font Utilities

Utility functions for advanced font operations including text rendering to images.

function renderToImageAsync(
  glyphs: string,
  options?: RenderToImageOptions
): Promise<RenderToImageResult>;

Font Utilities

Server-Side Support

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;

Server-Side Support

Types

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;
}