Skip to content

Style labels with Web fonts

Apply Web fonts to your style’s text labels. Unlike signed distance field (SDF) glyph sets, Web fonts are available from a variety of providers, or your can make your own using popular tools. This option is suitable for fonts that are only available through a third-party content delivery network (CDN) for technical or legal reasons, as well as fonts that are incompatible with SDF, such as variable fonts. For compatibility with Android and iOS applications, specify equivalent fonts in the style’s font-faces property.

import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.mjs';

document.fonts.load("24px 'Rampart One'");
const map = new maplibregl.Map({
    container: 'map',
    zoom: 9,
    center: [137.9150899566626, 36.25956997955441],
    style: {
        "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
            },
            "places": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "properties": {
                                "name": "Azumino"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [137.9054972, 36.3044083]
                            }
                        },
                        {
                            "type": "Feature",
                            "properties": {
                                "name": "Matsumoto"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [137.9687141, 36.2382047]
                            }
                        }
                    ]
                }
            }
        },
        "layers": [
            {
                "id": "satellite",
                "type": "raster",
                "source": "satellite"
            },
            {
                "id": "places",
                "type": "symbol",
                "source": "places",
                "layout": {
                    "text-font": ["Rampart One"],
                    "text-size": 24,
                    "text-field": ["get", "name"]
                },
                "paint": {
                    "text-color": "white"
                }
            }
        ]
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Style labels with Web fonts</title>
    <meta property="og:description" content="Apply Web fonts to your style’s text labels. Unlike signed distance field (SDF) glyph sets, Web fonts are available from a variety of providers, or your can make your own using popular tools. This option is suitable for fonts that are only available through a third-party content delivery network (CDN) for technical or legal reasons, as well as fonts that are incompatible with SDF, such as variable fonts. For compatibility with Android and iOS applications, specify equivalent fonts in the style’s font-faces property.">
    <meta property="og:category" content="Labels & Fonts" />
    <meta property="og:order" content="2" />
    <meta property="og:created" content="2025-10-31" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.css'>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rampart+One&amp;display=swap" rel="stylesheet">
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script type="module">
    import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.mjs';

    document.fonts.load("24px 'Rampart One'");
    const map = new maplibregl.Map({
        container: 'map',
        zoom: 9,
        center: [137.9150899566626, 36.25956997955441],
        style: {
            "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
                },
                "places": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [
                            {
                                "type": "Feature",
                                "properties": {
                                    "name": "Azumino"
                                },
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": [137.9054972, 36.3044083]
                                }
                            },
                            {
                                "type": "Feature",
                                "properties": {
                                    "name": "Matsumoto"
                                },
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": [137.9687141, 36.2382047]
                                }
                            }
                        ]
                    }
                }
            },
            "layers": [
                {
                    "id": "satellite",
                    "type": "raster",
                    "source": "satellite"
                },
                {
                    "id": "places",
                    "type": "symbol",
                    "source": "places",
                    "layout": {
                        "text-font": ["Rampart One"],
                        "text-size": 24,
                        "text-field": ["get", "name"]
                    },
                    "paint": {
                        "text-color": "white"
                    }
                }
            ]
        }
    });
</script>
</body>
</html>