Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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.

// src/main.rs 

use maplibre_gl_js::interface::MapOptions;
use yew::{Html, function_component, html, use_effect, use_state};

#[function_component(App)]
fn app() -> Html {
    let map_rendered = use_state(|| false);
    use_effect(move || {
        if *map_rendered {
            return;
        }
        MapOptions::new("map")
            .with_zoom(9.)
            .with_center([137.9150899566626, 36.25956997955441])
            .with_style(serde_json::json!({
                "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",
                        }
                    }
                ]
            }))
            .build()
            .expect("Creating a map should work");
        map_rendered.set(true);
    });
    html! { <div id="map"></div> }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
    console_error_panic_hook::set_once();
    yew::Renderer::<App>::new().render();
}
<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
    <title>Style labels with Web fonts</title>
    <link rel="scss" data-trunk href="scss/style.scss" />
    <script src="https://unpkg.com/maplibre-gl@^5.18.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@^5.18.0/dist/maplibre-gl.css" rel="stylesheet" />
    <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">
  </head>
  <body>loading...</body>
</html>

/* scss/style.scss */

body { margin: 0; padding: 0; }
html, body, body > div { height: 100%; }