kuito.
Começar

fonts

namespace
A tradução desta página não existe ou está desatualizada, por isso é mostrada em inglês. Ler em inglês

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.

Referência

Exportações 4

Métodos, constantes e tipos expostos por este namespace nativo.

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.
Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.