# Built-in fonts

> Three fonts every game has, named by key: Nacatamal Arcade, Square and Thin, with accents, ñ and icons.

Example `builtin-fonts`, running at https://nacatamalon.com/en/examples/builtin-fonts. The whole catalogue: https://nacatamalon.com/llms/examples.md.

A text with no font uses **Nacatamal Arcade**, the engine's own: two-pixel stems, cut corners, 8 × 8 cells. Two more come with it, named by key and with nothing to load: `font: 'nacatamalon:square'`, the same weight with square corners, and `font: 'nacatamalon:thin'`, one-pixel strokes and narrower.

The three have the same characters: lowercase, accents, ñ, ¿ and ¡, and the icons for prompts on screen (`← → ↑ ↓ ▲ ▼ ◀ ▶ Ⓐ Ⓑ Ⓧ Ⓨ ★ ♥ ● ■`). They are drawn for the engine and under its own licence, so a game that uses them owes no credit. `drawText` and a saved scene name them the same way.

## Code

`index.ts`:

```ts
import { createGame } from 'nacatamalon';
import { WIDTH, HEIGHT } from './settings';
import { Fonts } from './scenes/demo';

const game = createGame('#app', {
    width: WIDTH,
    height: HEIGHT,
    background: '#14121c',
    scaling: 'integer'
});

// Declare Scenes
game({
    Fonts
});
```

`components/fontsamples.ts`:

```ts
import { createText, getColor, useUpdate } from 'nacatamalon';
import * as Settings from '../settings';

export const FontSamples = () => {
    Settings.FONTS.forEach((font, i) => {
        const y = 24 + i * 56;

        createText({
            text: font.name,
            font: font.key,
            tint: getColor(font.colour),
            style: {
                fontSize: 16
            },
            transform: {
                x: 16,
                y
            }
        });
        createText({
            text: font.line,
            font: font.key,
            transform: {
                x: 16,
                y: y + 22
            }
        });
    });

    // The prompts are characters too, so a hint can blink like any text.
    const hint = createText({
        text: '← → MOVE   Ⓐ JUMP',
        font: 'nacatamalon:square',
        transform: {
            x: 16,
            y: 196
        }
    });

    useUpdate((_delta, time) => {
        hint.visible = Math.floor(time * 2) % 2 === 0;
    });
};
```

`scenes/demo.ts`:

```ts
import { createScene, useSpawn } from 'nacatamalon';

import { FontSamples } from '../components/fontsamples';

export const Fonts = () => {
    useSpawn(FontSamples)();

    return createScene();
};
```

`settings.ts`:

```ts
export const WIDTH = 320;
export const HEIGHT = 220;
export const FONTS = [
    {
        name: 'NACATAMAL ARCADE',
        key: 'nacatamalon:arcade',
        colour: '#ffc450',
        line: '¡A jugar! Año 2026 · PRESS ▶'
    },
    {
        name: 'NACATAMAL SQUARE',
        key: 'nacatamalon:square',
        colour: '#78dcff',
        line: 'SCORE 012345 · ¿Listo? Ⓐ'
    },
    {
        name: 'NACATAMAL THIN',
        key: 'nacatamalon:thin',
        colour: '#aaff96',
        line: 'mañana, árbol, pingüino ★ ♥'
    },
];
```