Font fallbacks (css-esque)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
The failure state of font loading is confusing and frustrating. Fonts are loaded based on tiles, and when a font fails to load (e.g. with a 404, common if a font is erroneously deleted or a style is shared to another Mapbox account) the map fails to render. Fine at one zoom level or map location, broken once a user navigates to a problematic spot. It's a problem that can hide until a map is published, receiving production traffic.
## Design Alternatives
We could interpret the text-font property as a font load stack as well as a glyph range stack. Currently, if my layer's `text-font` property looks like this `text-font: ["brandon grotesque", "impact", "open sans"]`, we will attempt to pull glyphs from `impact` if there are glyphs that aren't covered by `brandon grotesque`, and then finally we would fall back to glyphs from `open sans` if there are glyphs not covered by `impact`. We could also treat this as a font load stack, loading glyphs from `impact` if we fail to load `brandon grotesque`, and loading `open sans` if we fail to load `impact`. This change in how we interpret the spec may align better with existing user expectations since this is how font stacks work in CSS.
We could also serve a baseline font at the API level as a "last line of defense" but personally I'd prefer to go with the above option, and leave this firmly in implementors' hands.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the implementation of the `text-font` property and the font-loading behavior described in the issue. Compare the current glyph-range fallback with the proposed CSS-like font-load fallback, and define completion as preserving map rendering when a listed font fails to load.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100