Skip to content

Style labels with web fonts

Replicates the MapLibre example Style labels with web fonts. glyphs has no dedicated YAML field — but mapStyle accepts a full inline style object, so style-root concerns stay authorable without leaving the document.

style-labels-with-web-fonts.yaml
# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/style-labels-with-web-fonts/
# The trick here is INSIDE the YAML: mapStyle takes a full inline
# style object, so style-root concerns with no dedicated YAML field —
# glyphs, sprite, and friends — are still authorable.
type: map
id: style-labels-with-web-fonts
config:
center: [16.37, 48.21]
zoom: 10
mapStyle:
version: 8
name: glyphs-demo
glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf"
sources: {}
layers:
- id: backdrop
type: background
paint:
background-color: "#f4efe9"
layers:
- id: city-labels
type: symbol
source:
type: geojson
locations:
- { coordinates: [16.3738, 48.2082], name: Wien }
- { coordinates: [16.36, 48.185], name: Wieden }
- { coordinates: [16.4, 48.24], name: Donaustadt }
layout:
text-font: ["Noto Sans Regular"]
text-field: ["get", "name"]
text-size: 20
paint:
text-color: "#1d3557"
  • The inline mapStyle object is the widest opening in the format: anything the MapLibre style spec puts at the style root (glyphs, sprite, and today also terrain/sky/projection) can be authored there.
  • It is deliberately unvalidated — the style spec is MapLibre’s contract, not ours; mlym validate checks everything around it.