kuito.
Loslegen

fonts

Namespace
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen

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.

Referenz

Exporte 4

Methoden, Konstanten und Typen, die dieser native Namespace bereitstellt.

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.
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.