oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 02:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chart fonts: self-hosted roster + document.fonts.load render gate

Browse Source
This commit is contained in:
Oleh Omelchenko
2026-06-14 13:08:16 +03:00
parent df6a0b3845
commit b03c3b08ab
8 changed files with 353 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/chart-fonts.css
+51
View File
@@ -0,0 +1,51 @@
/*
* Chart font roster — self-hosted via @fontsource (docs/chart-theming-scope.md
* §3, §4 slice 5). These are the families the Theme Builder's font control
* offers for custom chart themes (`THEME_FONT_OPTIONS`), distinct from the UI
* font (IBM Plex, wired in base.css). Each `@font-face` is registered here so a
* chart rendered in this document can use it; the render path additionally
* `document.fonts.load`s the used faces before embed (chart text is measured via
* canvas `measureText` regardless of renderer, so a font that loads after embed
* would lay out with fallback metrics — see chart-renderer's font gate).
*
* Weights: 400 (body/labels) + 600 (titles/emphasis); Space Mono ships 400 + 700
* (it has no 600). The family-level weight import pulls every script subset
* (latin, cyrillic, greek, vietnamese, …) with `unicode-range`, so the browser
* only *downloads* the subset a glyph needs. Unlike the UI font, chart fonts are
* decoration with automatic per-glyph fallback, so only the latin subsets are
* precached for offline; other subsets are runtime-cached on first use (Workbox
* config in vite.config.ts). A non-latin label in a custom font that hasn't been
* fetched falls back to the system font — degraded styling, not a broken app.
*/
/* Dataviz sans */
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/libre-franklin/400.css';
@import '@fontsource/libre-franklin/600.css';
@import '@fontsource/roboto-condensed/400.css';
@import '@fontsource/roboto-condensed/600.css';
@import '@fontsource/ibm-plex-sans-condensed/400.css';
@import '@fontsource/ibm-plex-sans-condensed/600.css';
/* Serif */
@import '@fontsource/ibm-plex-serif/400.css';
@import '@fontsource/ibm-plex-serif/600.css';
@import '@fontsource/source-serif-4/400.css';
@import '@fontsource/source-serif-4/600.css';
@import '@fontsource/spectral/400.css';
@import '@fontsource/spectral/600.css';
/* Display */
@import '@fontsource/space-grotesk/400.css';
@import '@fontsource/space-grotesk/600.css';
@import '@fontsource/playfair-display/400.css';
@import '@fontsource/playfair-display/600.css';
/* Handwriting */
@import '@fontsource/caveat/400.css';
@import '@fontsource/caveat/600.css';
/* Mono */
@import '@fontsource/space-mono/400.css';
@import '@fontsource/space-mono/700.css';