Fonts for self hosted pmtiles

[Edefritz]

Hi and thanks a lot for your work on Protomaps. What an exciting project!

I was wondering about the self hosted deployment of .pmtiles you describe here
The steps worked very well. Thanks to the great documentation, I was able to set up world wide vector tiles with CDN in a couple of hours, which is just amazing.

Now I'm able to consume my own vector tiles in Maplibre GL, with the styles provided by 'protomaps-themes-base'. However, following the examples I still see a dependency to the fonts to https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf.

I guess if I would want to be completely independent, it would make sense to host those fonts on my own too, right? If so, it would be great to have that step documented too, which I'd be happy to help with.

Also I was wondering why you define the used font as NotoSans-Regular instead of Noto Sans Regular which seems to be the default in the vector tile spec.

Thanks!

[bdon]

why you define the used font as NotoSans-Regular instead of Noto Sans Regular

No reason, I think I just preferred not having to escape spaces in the URL. I don't believe the style specification is opinionated about the formatting of names, those are just the naming conventions of font files retrieved from the Mapbox API.

I maintain another project in the MapLibre org called font-maker - this lets you convert normal font files into PBFs in your browser that you can then host yourself. Those are just static files, but there are 256 files per font variation (256 for bold, 256 for regular, etc).

The goal of this repo is to provide a basemap inclusive of tiles and styles - you are right that this should extend to also the font files and sprites. The most naive solution would be to commit these font files to the Github source tree since they don't change much. Alternately we could add some automation to build those font files in GitHub pages, etc but that would slow down the build.

Will keep this issue open as a TODO for me for committing the fonts

[tyrauber]

hey @bdon, maplibre/demotiles fonts use Noto Sans Regular, as do all the maplibre projects outside of font-maker. What do you think about changing this repo and font-maker to keep the naming consistent? It is hard to use and combine different projects when the font names differ for the same font.

[bdon]

@tyrauber good idea - we should consolidate on Noto Sans Regular. I'll update this repo and font-maker to reflect that.

[bdon]

Hi @Edefritz - I have opened a PR on font-maker and used the Releases tab to upload the Regular and Bold Noto Sans files here:

https://github.com/maplibre/font-maker/releases

This is only a couple megabytes. Each font weight has 256 files, which are all in the one ZIP file.

Let me know how that works. We need to refine this in the future to to cover more codepoints maplibre/font-maker#16 at which point I'll make a release in that repo on GitHub.

@tyrauber I'm updating to Noto Sans Regular instead of NotoSans-Regular : #101

Also, cdn.protomaps.com/fonts/pbf/Noto Sans Regular contains the output of the font-maker release.

[daniel-j-h]

Hey folks, it looks like commit 972035e changed fonts to Roboto with the exception of

• basemaps/styles/src/base_layers.ts

  Line 1874 in 2f7c17b

  "text-font": ["Noto Sans Regular"],

• basemaps/styles/src/base_layers.ts

  Line 1723 in 2f7c17b

  // "text-font": ["Noto Sans Regular"],

I was wondering if we're committing to Roboto here and then should convert the font files once so that users can just download them? And I assume we want to get rid of Noto then completely or is there still a reason to keep it in the default styles? (e.g. for symbols or fallback?)

Maybe to take a step back: what is the strategy we are following wrt. fonts in these basemap styles?

[tyrauber]

That's a good catch, @daniel-j-h.

@bdon, Why even specify a font at all, given it's an external dependency, and the documentation has no explanation of the font requirements.

It would be one thing if the font was included in the library and didn't require extra configuration and hosting. But as is, this will fallback and err in the js console, correct? Is there a reason we don't use a web safe font? Or maybe, fallback to a series of web safe fonts?

 "text-font": ["Roboto", "Noto Sans Regular", "Tahoma", "Verdana", "Arial" ]

[bdon]

@daniel-j-h yes, thanks for the heads up - we're in the middle of merging a redesigned basemap, we're not 100% committed to Roboto and would prefer to adjust down if possible to have as few external dependencies. I'll need to generate a new base font set distribution as part of assets in this repository, and this requires me making some enhancements upstream at https://github.com/maplibre/font-maker

You can preview how the map looks here: http://maps.protomaps.com - the strategy is to strike a balance between looking good and having too many font families.

@tyrauber MapLibre GL is not capable of using system or web fonts, this is a design compromise made by Mapbox very early in the design of the library. I would love for it to be possible, and it's the goal of my work upstream in MapLibre like here: maplibre/maplibre-gl-js#2990

And yes, the documentation ought to cover the secondary assets required for a basemap deploy - fonts and sprites (we're still working hard on the icon design). The new documentation site for the end-to-end system will live here http://github.com/protomaps/docs but this is not usable or live yet.

Thanks all!

[daniel-j-h]

Just in case anyone wants to play around with custom fonts on a pmtiles maplibre map; I wanted to figure it out for a small side project and here's how to do it for now until this basemap repo has a strategy for interchangeable fonts

1. Download font files e.g. for Inter from https://github.com/rsms/inter/releases (Regular, Medium, Italic)
2. Convert them to pbf files with https://github.com/maplibre/font-maker conveniently at https://maplibre.org/font-maker/
3. Host the pbf fonts on a static host and point the maplibre font glyphs style section to it (see below)
4. Change the basemap style from this repo (the latest release 2.0.0-alpha.1 still has Noto and Roboto included)

style: {
  version: 8,
  glyphs: "https://myhost.example.com/fonts/{fontstack}/{range}.pbf",

layers: JSON.parse(JSON.stringify(protomaps_themes_base.default("tiles", "white"))
    .replace(/Noto Sans/g, "Inter")
    .replace(/Roboto/g, "Inter")),

bit ugly with the json round-trip but that's the easiest compared to traversing the object tree.

[bdon]

@daniel-j-h thanks for posting this example! The challenge is that we need to generate a combined font for as many languages as possible, with a fallback like Noto after our primary font. If your map is for a limited Latin-only area then your method should work great.

Maybe we should make a separate repo called protomaps/basemaps-assets that simply has a GitHub pages deployment with all the font files there? It would be cleaner than trying to make this repo's GitHub pages also have all the font files committed.

[nvkelso]

+1 to paired "assets" config. Is this font specific or suitable for combining with sprites? If not, then maybe basemap-fonts and basemap-sprites (instead of something that sounds generic but is specific)?

[bdon]

Could be:

protomaps.github.io/basemaps-assets/fonts/Barlow, Noto Sans Regular/0-255.pbf
protomaps.github.io/basemaps-assets/sprites/v3@2x.json
protomaps.github.io/basemaps-assets/sprites/v3@2x.png

I have also wanted a place to stash WOF shapes like this:

protomaps.github.io/assets/shapes/canada.geojson

but that may be totally unrelated...

[bdon]

Opened a PR: https://github.com/protomaps/basemaps/pull/169/files

It ought to be obvious from the URL that you can go to http://github.com/protomaps/basemaps-assets to download a ZIP of all the font files.

[bdon]

This is now documented at https://docs.protomaps.com/basemaps/maplibre#fonts

• The https://github.com/protomaps/basemaps-assets will contain Noto Sans in Regular, Medium and Italic variants. We'll also add a new font called Technical built from other fonts to be used for this basemap, but Noto Sans will be an alternate option.