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.

<!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 charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.12.0/dist/maplibre-gl.css'>
    <script src='https://unpkg.com/maplibre-gl@5.12.0/dist/maplibre-gl.js'></script>
    <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>
    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>