Remove Google Fonts

[olsp]

It would be great to have a version of ol-mapbox-style without the automatic loading of Google Fonts. Using Google Fonts by default does not comply with the GDPR and therefore problematic for many users.

[ahocevar]

You can easily deploy an application without automatic Google Fonts downloads when you add stylesheets with the web fonts used by your map before calling anything from ol-mapbox-style. ol-mapbox-style will only load fonts from Google Fonts that it does not find.

[karussell]

I can see that you allow defining custom fonts here but this is a bit awkward as we would need to go through all the necessary fonts of the used vector tiles and potentially lazy load them to avoid too much work when the vector tiles are not required.

Isn't there a mechanism that avoids fetching the missing fonts from Google servers and instead uses the tile service? Sorry if this is a stupid question :) I just started to learn about this topic and when I read the readme section about it I do not yet understand what it means for this matter.

E.g. have a look at the example maps on https://mapilion.com: there they use maplibre GL JS I think and they load everything, including the fonts, from the mapilion.com service without defining the fonts somewhere else. And when we load their vector tiles through openlayers (ol-mapbox-style 9.2.0) the fonts are fetched from Google servers. The same problem happens for vector tiles from https://www.maptiler.com and for their example maps they load all the fonts through maptiler.com. (See this issue.)

So it seems that OL is not yet considering this?

btw: the mapilion font endpoint is:

"glyphs": "https://tiles.kurviger.de/v1/fonts/{fontstack}/{range}.pbf",

(I think this is the spec https://docs.mapbox.com/mapbox-gl-js/style-spec/glyphs/ )

[ahocevar]

Every browser can render Web fonts. Only maplibre-gl-js and mapbox-gl-js can render PBF glyphs. And these PBF glyphs are usually converted from Web fonts. So my suggestion would be to ask the map service providers to publish their fonts also as CSS. Then ol-mapbox-style could take an entry like

"glyphs": "https://tiles.kurviger.de/v1/fonts/{fontstack}/{range}.pbf",

and load e.g. https://tiles.kurviger.de/v1/fonts/{fontstack}/{range}.css.

Edit: the css url would probably look more like https://tiles.kurviger.de/v1/fonts/{fontname}/{fontweight}/{fontstyle}.css. Then it would work the same way as the Google Fonts API.

[karussell]

Thanks for the quick answer and this explanation - makes sense!

So this is something special for maplibre/mapbox. (probably they can't use Web fonts due to WebGL?)

For now I was able to fix this via providing the fonts locally.

So my suggestion would be to ask the map service providers to publish their fonts also as CSS.

Have created an issue here: maptiler/tileserver-gl#641 as this is a widely used vector tile server (Please let me know if I misunderstood something)

[ahocevar]

@karussell That ticket looks good. You could already automate font downloads without Google Fonts to some extent now by fetching them from https://cdn.jsdelivr.net/npm/@fontsource/. However, this would mean to download more than you need, because you cannot choose individual font weights and styles there.

ol-mapbox-style allows you to configure a function to add web fonts on the level of src/stylefunction.js, using the getFonts argument. It would be an easy improvement to make that available also as option on the apply and applyStyle functions.

[smellman]

and load e.g. https://tiles.kurviger.de/v1/fonts/{fontstack}/{range}.css.
This idea is ignore by Mapbox/MapLibre Style Specification.
GDPR is big problem and supports default SDF/PBF supports is better for me.
I host our font with tileserver-gl with migmix font.
It is open font but there are not host in cdn now.

[karussell]

You can provide the font on your domain (see e.g. here on how we did it. Unfortunately there is a minor glitch with firefox.)

[smellman]

I don't want to provide font in my site because I add new font if I find better font.
https://github.com/osmfj/tileserver-gl-site/tree/master/fonts
Predicting which fonts are available is not a concrete solution.

[ahocevar]

@smellman OpenLayers does not support PBF glyphs, so web fonts are the way to go. And it is very easy to avoid Google fonts, as you can see in this example: https://codesandbox.io/s/muddy-sea-dof9gb?file=/src/index.js. Just import the fonts that your map needs from @fontsource:

import "@fontsource/noto-sans";
import "@fontsource/noto-serif";
import "ol/ol.css";
import "./styles.css";
import { apply } from "ol-mapbox-style";

apply(
  "map",
  "https://cdn.arcgis.com/sharing/rest/content/items/7dc6cea0b1764a1f9af2e679f642f0f5/resources/styles/root.json?f=json",
  {
    transformRequest(url, type) {
      if (type === "Source") {
        return new Request(
          url.replace("/VectorTileServer", "/VectorTileServer/")
        );
      }
    }
  }
);

As a result, ol-mapbox-style will not trigger Google Fonts requests for the Noto Sans and Noto Serif fonts, which are the only fonts used by the referenced map.

[ahocevar]

I've thought about this more after good discussions at this year's FOSSGIS conference in Berlin. I suggest to add some metadata to the style json to indicate where webfonts can be downloaded:

{
  "version": 8,
  "metadata": {
    "ol:webfonts": "https://mytileservergl.com/fonts/{font-family}/{fontweight}{-fontstyle}.css"
  }
  // ...
}

The supported template placeholders I'm going to add will be

• {font-family}: CSS font family converted to lowercase, blanks replaced with -, e.g. noto-sans
• {Font+Family}: CSS font family in original case, blanks replaced with +, e.g. Noto+Sans
• {fontweight}: CSS font weight (numeric), e.g. 400, 700
• {fontstyle}: CSS font style, e.g. normal, italic
• {-fontstyle}: CSS font style other than normal, e.g. -italic or empty string for normal

In addition to providing fonts along with the style, this can be used to retrieve fonts from a CDN (e.g. @fontsource) or Google fonts. I'm also going to change the default from Google to @fontsource, which is equivalent to the following template:

https://cdn.jsdelivr.net/npm/@fontsource/{font-family}/{fontweight}{-fontstyle}.css

To retain the current behavior (i.e. use Google Fonts), the template will have to be

https://fonts.googleapis.com/css?family={Font+Family}:{fontweight}{fontstyle}