Skip to content

Style labels with local fonts

Apply local fonts to your style’s text labels. This option is suitable if you don’t need every user to see exactly the same font, or if you want to avoid relying on a third-party content delivery network (CDN). For maximum compatibility, the text-font property should include fonts commonly found on multiple platforms.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Style labels with local fonts</title>
    <meta property="og:description" content="Apply local fonts to your style’s text labels. This option is suitable if you don’t need every user to see exactly the same font, or if you want to avoid relying on a third-party content delivery network (CDN). For maximum compatibility, the text-font property should include fonts commonly found on multiple platforms.">
    <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>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    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": "安曇野市"
                                },
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": [137.9054972, 36.3044083]
                                }
                            },
                            {
                                "type": "Feature",
                                "properties": {
                                    "name": "松本市"
                                },
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": [137.9687141, 36.2382047]
                                }
                            }
                        ]
                    }
                }
            },
            "layers": [
                {
                    "id": "satellite",
                    "type": "raster",
                    "source": "satellite"
                },
                {
                    "id": "places",
                    "type": "symbol",
                    "source": "places",
                    "layout": {
                        "text-font": ["Hiragino Mincho ProN", "Noto Serif CJK JP", "MS Mincho"],
                        "text-size": 24,
                        "text-field": ["get", "name"]
                    },
                    "paint": {
                        "text-color": "white"
                    }
                }
            ]
        }
    });
</script>
</body>
</html>