Code Monkey home page Code Monkey logo

Comments (13)

bdon avatar bdon commented on May 13, 2024 6

@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!

from basemaps.

bdon avatar bdon commented on May 13, 2024 2

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.

from basemaps.

bdon avatar bdon commented on May 13, 2024 1

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.

from basemaps.

bdon avatar bdon commented on May 13, 2024 1

Could be:

protomaps.github.io/basemaps-assets/fonts/Barlow, Noto Sans Regular/0-255.pbf
protomaps.github.io/basemaps-assets/sprites/[email protected]
protomaps.github.io/basemaps-assets/sprites/[email protected]

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...

from basemaps.

bdon avatar bdon commented on May 13, 2024

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

from basemaps.

tyrauber avatar tyrauber commented on May 13, 2024

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.

from basemaps.

bdon avatar bdon commented on May 13, 2024

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

from basemaps.

daniel-j-h avatar daniel-j-h commented on May 13, 2024

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

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?

from basemaps.

tyrauber avatar tyrauber commented on May 13, 2024

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" ]

from basemaps.

daniel-j-h avatar daniel-j-h commented on May 13, 2024

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.

from basemaps.

bdon avatar bdon commented on May 13, 2024

@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.

from basemaps.

nvkelso avatar nvkelso commented on May 13, 2024

+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)?

from basemaps.

bdon avatar bdon commented on May 13, 2024

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.

from basemaps.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.