How can I add local glyphs?

[fafo]

I'd like to distribute my fonts with the App: where should I place them and which is the URL for the style?

[KiwiKilian]

I don't know for sure, but my guess is, it's not supported currently by MapLibre RN.

Could you check, if this is possible with MapLibre Native at all for Android and iOS?

[KiwiKilian]

Actually this might be possible, similar to this, if you use asset:// or file:// for the glyphs in your style? #591 (comment)

[adammonteil]

hello, any news about that ? i can't make it work for now, i don't know if i put my glyphs in the right place, it's currently in ./static/glyphs/{my glyphs} but when i call "glyphs": "./static/glyphs/{fontstack}/{range}.pbf" it doesn't work

[panevka]

hey. i've been playing around with this as im building an app that has to be 100% offline.

here's how i set everything up such that offline fonts worked for me

1. Git cloned https://github.com/korywka/fonts.pbf
2. Copied content of "Open Sans Regular" directory to my RN Expo project under ./assets/fonts/open-sans-regular such that it contained the .pbf files
3. Added support for pbf files in metro.config.js by adding a line config.resolver.assetExts.push('pbf')
4. Installed expo-asset package, and expo-file-system.
5. Configured asset settings in app.json:

 "plugins": [
      "@maplibre/maplibre-react-native",
      [
        "expo-asset",
        {
          "assets": [
            "./assets/fonts/open-sans-regular/0-255.pbf",
            "./assets/fonts/open-sans-regular/10240-10495.pbf",
           // the rest of .pbf files (yes, all of 'em)
          ]
        }
      ]
    ],

6. Then i created Component.tsx (let's name it that for the sake of it):

import React, { useEffect } from "react";
import * as FileSystem from "expo-file-system/legacy";
import { useAssets } from "expo-asset";

const moduleAssets = [
  require("../../../../assets/fonts/open-sans-regular/0-255.pbf"),
  require("../../../../assets/fonts/open-sans-regular/10240-10495.pbf"),
  require("../../../../assets/fonts/open-sans-regular/1024-1279.pbf"),
  // the rest of .pbf files
]

const Component = () => {
   const [fontAssets] = useAssets([...moduleAssets]);

  useEffect(() => {
    const prepareFonts = async () => {
      fontAssets?.map(async (asset) => {

        const dest = FileSystem.documentDirectory + `font/open-sans-regular/${asset.name}.${asset.type}`;

        const info = await FileSystem.getInfoAsync(dest);

        if (!info.exists) {
          await FileSystem.copyAsync({ from: asset.localUri!, to: dest });
        }
      })

    };

    prepareFonts();
  }, [fontAssets]);

return (<Map style={{ flex: 1 }}
        mapStyle={{
          glyphs: `${FileSystem.documentDirectory}/font/{fontstack}/{range}.pbf`,
          layers: // example layer utilizing offline fonts
            {
              id: "street_labels",
              type: "symbol",
              source: "mbtiles",
              "source-layer": "street_labels",
              layout: {
                "text-field": ["get", "name"],
                "text-size": 11,
                "text-font": ["open-sans-regular"], // notice the font name hyphenation
                "symbol-placement": "line",
                "text-max-angle": 30,
              },
              paint: {
                "text-color": "#7a6e66",
                "text-halo-color": "#ffffff",
                "text-halo-width": 1.5,
              },
            },
          // the rest of the config, make sure to pass all necessary properties like mbtiles path etc.
        }}>
      </Map>)
}

There's probably a much cleaner way to make this work (e.g. instead of a huge array of modules playing around with glob patterns), but I just figured this out recently and it worked.