Load multiple fonts glyphs locally

[always-beta]

I've checked some repo introducing how to put glyphs in the app bundle and load it directly instead of sending network requests, but it only works when there is only one font defined for each style layer.

For my case, I've defined multiple (say fonts A, B and C) fonts as fallback for each style layer, but it still makes the url as file:///fonts/A,B,C/0-255.pbf which results as a Not Found.

Is there anyway I can ship multiple fonts with the app bundle and use them directly?

[ChrisLoer]

Hi @always-beta, I'm not sure which instructions you're following, but it should work to cache glyphs locally for a whole "fontstack" (the "fontstack" = "A, B, C" in your example above). Instead of locally storing glyph PBF files for "A", you'd store them for the combined fontstack "A, B, C". The way this works is that the PBF contains glyphs from the first font in the stack if they're available, and if not it falls back to the second or third fonts.

Here's an example request for the 0-255 PBF for a two-font fontstack from the Mapbox Streets style:

https://api.mapbox.com/fonts/v1/mapbox/DIN%20Offc%20Pro%20Italic,Arial%20Unicode%20MS%20Regular/0-255.pbf?access_token=[your access token here]

[jfirebaugh]

Also see #7862 for our future planning for local fonts.

[always-beta]

Thank you guys, if I understand correctly, what @ChrisLoer means is:

1. Prepare font A with 0-255.pbf, font B with 0-255.pbf
2. Merge the two pbfs into one 0-255.pbf
3. Store it in the app bundle, with path of something like: file:///fonts/A,B/0-255.pbf

If it's what you mean, I think it adds the restriction of: all styles require font have to be defined as
"text-font": [ A, B, C ],
regardless of what order or which fonts the style really needs, is that right?

[ChrisLoer]

@always-beta that sounds correct, but there's still probably a lot of room for confusion here:

regardless of what order or which fonts the style really needs

The PBF can only have one glyph for each Unicode code point, so that effectively defines the "order". When you build your PBF for [ A, B, C ], you're choosing exactly which glyph will be returned for each code point when a style uses that fontstack.

2. Merge the two pbfs into one 0-255.pbf

This step isn't wrong, but it makes me wonder how you're building the PBFs, because it sounds like you might be doing a lot of extra work. If you're not downloading PBFs from the Mapbox APIs, you can build them using our open-source PBF builder -- which is configured to use fontstacks from the beginning, so you don't have to merge them yourself.