kuito.
Commencer

fonts

espace de noms
La traduction de cette page manque ou n'est plus à jour : elle s'affiche en anglais. Lire en anglais

Use a custom font for branding or typography. Bundle fonts needed on the first screen; load optional fonts when their content is requested.

Bundle fonts in the native app

ts
// kuito.config.ts
import type { KuitoConfig } from 'kuito/config';

export default {
  name: 'Reel',
  ios: { bundleIdentifier: 'com.example.reel' },
  android: { applicationId: 'com.example.reel' },
  fonts: [
    './assets/fonts/Pacifico-Regular.ttf',
    './assets/fonts/Lato-Regular.ttf',
    './assets/fonts/Lato-Bold.ttf',
    // A file whose own tables name its face wrongly:
    { file: './assets/fonts/LatoHeavy.otf', family: 'Lato', weight: 900, style: 'italic' },
  ],
  environments: {
    staging: { fonts: ['./assets/fonts/Staging.ttf'] },
  },
} satisfies KuitoConfig;

Use a font in a label

tsx
import { Text, VStack } from 'kuito';

export function Titles() {
  return (
    <VStack>
      <Text fontFamily="Pacifico">Bundled</Text>
      <Text fontFamily="Lato" fontWeight="bold">
        Loaded at run time
      </Text>
    </VStack>
  );
}

Load an optional font

tsx
import { fileSystem, fonts } from 'kuito';

const LATO = 'https://raw.githubusercontent.com/google/fonts/main/ofl/lato/';
const regular = fileSystem.cache + 'Lato-Regular.ttf';
const bold = fileSystem.cache + 'Lato-Bold.ttf';

await fileSystem.download(LATO + 'Lato-Regular.ttf', regular);
await fileSystem.download(LATO + 'Lato-Bold.ttf', bold);
await fonts.load({ Lato: [regular, { uri: bold, weight: 'bold' }] });

fonts.loaded('Lato'); // true: bundled or loaded

Behavior and limits

Use .ttf or .otf assets. Configured fonts are packaged into both native shells and referenced through fontFamily. fonts.load is asynchronous; wait for it before relying on the face, and use fonts.loaded to avoid unnecessary work. Keep readable fallbacks and allow system font scaling for accessibility.

Continue

Read Assets for the related workflow. The API reference lists every method, option, event and return type.

Référence

Exports 4

Méthodes, constantes et types exposés par cet espace de noms natif.

functionloadRegisters each family's files, by the name fontFamily uses.typeFontWeightA font file's weight: 'normal' (400), 'bold' (700), or 100 to 900 in hundreds.typeFontSourceA font file: a file:// URI, or one with the weight and style it draws.functionloadedWhether fontFamily takes family: bundled, or loaded by load.
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.