Skip to content
maplibre-yaml

Style labels with local fonts

Replicates the MapLibre example Style labels with local fonts. The trick is inside the YAML: an inline mapStyle object with no glyphs URL. With no glyph server to ask, MapLibre renders every label itself from fonts installed on the reader’s machine, trying the text-font stack as CSS font families in order — here, Japanese serif faces.

Azumino and Matsumoto in the reader's own Mincho font

The complete document (the trick is the inline mapStyle)

Section titled “The complete document (the trick is the inline mapStyle)”
style-labels-with-local-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-local-fonts/
# The trick is INSIDE the YAML: an inline mapStyle object with NO
# `glyphs` URL. With no glyph server to ask, MapLibre draws every label
# itself from the fonts installed on the reader's machine, trying the
# `text-font` stack as CSS font families in order.
type: map
id: style-labels-with-local-fonts
config:
  center: [137.9150899566626, 36.25956997955441]
  zoom: 9
  mapStyle:
    version: 8
    sources:
      satellite:
        type: raster
        tiles: ["https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg"]
        tileSize: 256
        attribution: "Sentinel-2 cloudless by EOX IT Services GmbH (CC BY 4.0)"
    layers:
      - { id: satellite, type: raster, source: satellite }
layers:
  - id: places
    type: symbol
    source:
      type: geojson
      locations:
        - { coordinates: [137.9054972, 36.3044083], name: 安曇野市 }
        - { coordinates: [137.9687141, 36.2382047], name: 松本市 }
    layout:
      text-font: ["Hiragino Mincho ProN", "Noto Serif CJK JP", "MS Mincho"]
      text-size: 24
      text-field: ["get", "name"]
    paint:
      text-color: white

What to notice

Section titled “What to notice”
  • What renders depends on the reader’s machine: a stack of several platform fonts (macOS, Linux, Windows) keeps it predictable.
  • To keep a glyph server for Latin text and draw only CJK locally, use config.localIdeographFontFamily instead — see Use locally generated ideographs.
  • Imagery: Sentinel-2 cloudless by EOX IT Services GmbH (CC BY 4.0).
  • Needs maplibre-gl ≥ 5.11; earlier versions require a glyphs URL for any text.