OpenLayers Vector Tiles need Web font instead of PBF glyphs

[karussell]

When using vector tiles from tileserver-gl with OpenLayers it currently falls back to downloading fonts from Google font servers. See openlayers/ol-mapbox-style#698

Fixing this would be easier if the fonts are not only defined via the glyphs (for maplibre) but also as normal Web fonts and make them available in a css ala https://mytileservergl.com/fonts/{fontstack}/{range}.css.

Currently one either has to accept that fonts are downloaded from Google servers. Or you add every single font used in the vector tiles to your application. And every client has to repeat this work again.

[ahocevar]

Or rather, publish the used fonts as web fonts with urls like https://mytileservergl.com/fonts/{fontname}/{fontweight}/{fontstyle}.css. Then the mechanism for obtaining the fonts in a way that makes sense for browsers would be similar to the Google Fonts API.

[acalcutt]

Do you have any open examples of fonts in this css format I could download and look at?

If someone were to work with this I think you would start with either modifying this endpoint https://github.com/maptiler/tileserver-gl/blob/master/src/serve_font.js#L41

Or, in the case of the second post, probably making a new similar endpoint.

[ahocevar]

@acalcutt The Google Fonts API delivers fonts like this, e.g. https://fonts.googleapis.com/css?family=Noto+Sans:400italic. Or Fontsource, e.g. https://cdn.jsdelivr.net/npm/@fontsource/noto-sans/400-italic.css.

[ahocevar]

See openlayers/ol-mapbox-style#698 (comment) for my proposal for a metadata extension to the GL Style documents.

To provide fonts like that, it should be enough to expose the directory structure of the respective @fontsource npm packages on the server.

Let me know if there are any questions or comments.