Skip to content
maplibre-yaml

Style labels with font faces

Replicates the MapLibre example Style labels with font faces. The glyph server has no Georgian or Armenian, so the style names a font file for each of those scripts. Latin labels still come from the glyphs URL.

The complete document

Section titled “The complete document”
style-labels-with-font-faces.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-font-faces/
# `font-faces` is a style-ROOT key with no dedicated YAML field, so — as on
# the web-fonts page — it rides the inline `mapStyle` object (a style-root
# route inside the document). Each font file is registered under the name
# the layer's `text-font` asks for, narrowed to its script's unicode-range;
# everything else still comes from the glyphs URL. maplibre-gl >= 6.7.0
# renders font-faces (the docs site runs 6.x); older versions ignore it.
type: map
id: style-labels-with-font-faces
config:
  center: [42.3, 40.95]
  zoom: 5.8
  mapStyle:
    version: 8
    # Latin labels come from this glyph server, which has no Georgian or Armenian...
    glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf"
    # ...so a font file covers each of those scripts, under the same name.
    font-faces:
      Noto Sans Regular:
        - url: "https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansGeorgian/hinted/ttf/NotoSansGeorgian-Regular.ttf"
          unicode-range: ["U+10A0-10FF", "U+1C90-1CBF"]
        - url: "https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansArmenian/hinted/ttf/NotoSansArmenian-Regular.ttf"
          unicode-range: ["U+0530-058F"]
    sources: {}
    layers: []
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 (contains modified Copernicus Sentinel data 2020)"
layers:
  - id: satellite
    type: raster
    source: satellite
  - id: places
    type: symbol
    source:
      type: geojson
      data:
        type: FeatureCollection
        features:
          - { type: Feature, properties: { name: "თბილისი" }, geometry: { type: Point, coordinates: [44.8271, 41.7151] } }
          - { type: Feature, properties: { name: "ბათუმი" }, geometry: { type: Point, coordinates: [41.6367, 41.6168] } }
          - { type: Feature, properties: { name: "Երևան" }, geometry: { type: Point, coordinates: [44.5152, 40.1872] } }
          - { type: Feature, properties: { name: "Գյումրի" }, geometry: { type: Point, coordinates: [43.8453, 40.7894] } }
          - { type: Feature, properties: { name: "Trabzon" }, geometry: { type: Point, coordinates: [39.7168, 41.0027] } }
          - { type: Feature, properties: { name: "Erzurum" }, geometry: { type: Point, coordinates: [41.2769, 39.9043] } }
    layout:
      text-font: ["Noto Sans Regular"]
      text-size: 20
      text-field: ["get", "name"]
    paint:
      text-color: "white"
      text-halo-color: "black"
      text-halo-width: 1

What to notice

Section titled “What to notice”
  • font-faces belongs at the style root and has no dedicated YAML field. It rides the inline mapStyle object, the same route the web-fonts example uses for glyphs. That is still YAML — no page JavaScript — so this row is badged YAML.
  • Each font face is listed under the name the layer’s text-font asks for (Noto Sans Regular). Its unicode-range limits it to one script, and characters outside every range fall back to the glyphs URL.
  • Requires maplibre-gl ≥ 6.7.0, the first release that renders font-faces. Older runtimes ignore the key and Georgian and Armenian labels do not draw. The docs site runs 6.x.