Skip to main content

Font stacks inside formatted text

Select independent font stacks for text sections using the existing PBF glyph service

Shared point labels support text-font inside format sections. Each section can select a complete ordered font stack, inheriting root layout.text-font when omitted. The same character uses its own bitmap and advance under each stack, changing actual glyphs, text width and wrapping rather than only a font-name declaration.

// Replace the address and names with values actually provided by your glyph service.
map.setGlyphs('https://your-glyphs.example/{fontstack}/{range}.pbf');
map.setLayoutProperty('formatted', 'text-font', ['Narrow Font', 'Fallback']);
map.setLayoutProperty('formatted', 'text-field', ['format',
  'A', {'text-color': 'red'},
  'A', {
    'text-color': 'blue',
    'text-font': ['literal', ['Wide Font', 'Fallback']]
  }
]);
await map.sqs.flush({render: true});

This updates an existing point-text layer; see formatted text for its basic setup. A section's text-font accepts a shared expression returning an array of names, including get, literal and lexical variables. Stack order is preserved, not reduced to its first family. The complete stack is encoded as one glyph-template path component. Root font layout uses an ordinary name array; a constant section array uses literal.

Arriving PBF glyphs trigger a new text preparation. A single rendered-frame confirmation does not guarantee downloaded glyphs; use resource/idle events to determine readiness. The portable script and complete validation page generate test PBFs for two stacks without downloading third-party font files.

Sections still share one anchor, rotation, vertical alignment, collision and query box. Each stack accepts 1–8 nonempty names, at most 256 bytes per name and no NUL. Existing text, glyph, atlas, cache and expression budgets still apply; invalid candidates preserve the previous label and image. commonFormattedTextFonts covers this PBF path.

With no service or with missing/failed glyphs, existing bundled-font fallback and warnings remain in effect. Font names do not load local font files; the PBF service supplies the actual glyphs. TTF/OTF files, font-faces, OS font selection, complex shaping and SDF image sections remain unfinished. Registered RGBA image sections are available. Device acceptance and formal release are tracked separately.

Copy the self-contained portable-format-font.js, or use the complete browser page. It generates test PBF glyphs through a custom protocol. The same A uses narrow and wide font stacks, passing 14 checks and actual glyph width checks in native, browser main-thread and Worker hosts. A native host must continue driving frames while resources are pending; browser hosts do this automatically.