Requests to third-party server for fonts

[simonseyock]

This lines will cause requests to a third-party server:

ol-mapbox-style/src/text.js

Lines 158 to 161 in f85e5ff

	export function getFonts(
	fonts,
	templateUrl = 'https://cdn.jsdelivr.net/npm/@fontsource/{font-family}/{fontweight}{-fontstyle}.css'
	) {

ol-mapbox-style/src/stylefunction.js

Lines 1209 to 1218 in f85e5ff

	font = mb2css(
	getFonts
	? getFonts(
	fontArray,
	glStyle.metadata ? glStyle.metadata['ol:webfonts'] : undefined
	)
	: fontArray,
	textSize,
	textLineHeight
	);

ol-mapbox-style/src/apply.js

Lines 356 to 365 in f85e5ff

	style = applyStyleFunction(
	layer,
	glStyle,
	sourceOrLayers,
	resolutions,
	spriteData,
	spriteImageUrl,
	getFonts,
	options.getImage
	);

This is not really documented, in the stylefunction docs you find this:

Function that receives a font stack and the url template from the GL style's metadata['ol:webfonts'] property (if set) as arguments, and returns a (modified) font stack that is available. Font names are the names used in the Mapbox Style object. If not provided, the font stack will be used as-is. This function can also be used for loading web fonts.

In the fonts part of the docs you find this:

If no metadata['ol:webfonts'] property is available on the Style object, Fontsource Fonts will be used. It is also possible for the application to load other fonts. If a font is already available in the browser, ol-mapbox-style will not load it.

This does not make it clear that by default a third-party server will be requested.

Also in my personal opinion this should be an opt-in feature instead of the default behavior.

[ahocevar]

@simonseyock If that's made opt-in, 99% of all maps will be displayed with incorrect fonts. So I don't think this would be practical. Especially given the fact that most users will be using maps that also come from a 3rd party server.

If you have a suggestion for a doc improvement, feel free to create a pull request.

[simonseyock]

Ok, you are probably right. I see if I can improve the docs here.

[ahocevar]

Note: Ideally, map publishers like MapTiler or basemap.de should include an ol:webfonts entry in their style jsons, and provide web fonts next to their map tiles. The ol:webfonts metadata option was added after FOSS4G 2022, to give map publishers a direct way to avoid having to use 3rd party font servers.

@simonseyock, I think you're closer to basemap.de than I am, so maybe you can remind them to update their style jsons. And maybe @klokan can help to get the same done at MapTiler. For reference, here is the documentation: https://github.com/openlayers/ol-mapbox-style#font-handling.

[jdnarvaez]

how is this supposed to work when used in conjunction directly with a mapbox url? I cannot seem to find where I would be able to intercept the style object or style object request to inject the webfonts attribute

[ahocevar]

You cannot, but I think ot would make sense to ads an option for that.

[simonseyock]

@simonseyock, I think you're closer to basemap.de than I am, so maybe you can remind them to update their style jsons. And maybe @klokan can help to get the same done at MapTiler. For reference, here is the documentation: https://github.com/openlayers/ol-mapbox-style#font-handling.

I try to establish a contact here 👍

[marcjansen]

I mention some people close to the basemap.de Team: @stenderg @sratjens @TheCartographerDev

[ahocevar]

See #1058

[ahocevar]

So, obviously just a mention of @stenderg @sratjens @TheCartographerDev was not sufficient. Here are the changes necessary to avoid font downloads from FontSource:

• In each root style json, add the following to "metadata":

  "ol:webfonts": "https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/webfonts/{font-family}/{fontweight}{-fontstyle}.css"

• In the basemap.de assets structure, add a webfonts folder in gdz_basemapde_vector

• Change into the webfonts directory

• Download https://registry.npmjs.org/@fontsource/noto-sans/-/noto-sans-5.1.1.tgz . Unpack it, rename the package directory to noto-sans.

• Download https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.1.tgz. Unpack it, rename the package directory to roboto.

• If there are more fonts than noto-sans or roboto, do the above for these as well.