search

observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.39k stars 106 forks source link

Preload and self-host web fonts based on custom styles #423

Open mbostock opened 9 months ago

mbostock commented 9 months ago

414 adds support for custom styles, but we still hard-code the use of Google Fonts. We should instead transform the CSS bundle somehow to flatten external imports so that preloading is accurate.

mbostock commented 6 months ago

We likely want to introduce a google-fonts: protocol here so that users can control what’s self-hosted. It would be analogous to the self-hosting you get with npm:, versus when you link to https://cdn.jsdelivr.net/ to load the resource at runtime from an external website. So maybe this is self-hosted:

<link rel="stylesheet" href="google-fonts:/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">

But this is hotlinked:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">
Fil commented 6 months ago

Does this need to be tied to the vendor? Or can we imagine calling this fonts:, with the vendor indicated elsewhere (in the configuration or in the URL rather than in the "protocol")?

e.g. <link rel="stylesheet" href="fonts:https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">

or if we want shorthand:

<link rel="stylesheet" href="fonts:google/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">

Fil commented 1 month ago

This needs to be rethought after #1597 solved the main issue (i.e., that google fonts was hard-coded and prevented complete self-hosting); maybe it's just the same as #1573 now?