globalStylesheets config option

[mbostock]

Alternative to #1589 and #1595. Adds a globalStylesheets option to the config which specifies a set of stylesheets to add to all pages (in addition to the style option which can be specified either globally or on a specific page). By default it’s Source Serif Pro 4 from Google Fonts. Also adds a little heuristic to add the preconnect for Google Fonts if a Google Fonts stylesheet is detected. Related #423.

[mbostock]

Also tacked on an upgrade to Source Serif 4 that @Fil noticed…

[Fil]

Yeah I think this is the right call 😅

[Fil]

I've added a bit of documentation

[shadoof]

Apologies for possibly naive question, but when creating a new framework with latest version, there is no indication in observablehq.config.js for how the 'default' version of this option should be setup (i.e. so as to load Source Serif 4) which is exactly what I would like. Visual Studio Code offers ["src/styles.css"] as a value but since this file does not exist after npx @observablehq/framework@latest create is run, I'm guessing that's a problem?

And does the above issue discussion imply that @import url('[google font]') should work globally in this context in any of my array of CSS 'globalStylesheets' ?

[Fil]

@shadoof here's a concrete example:

in observablehq.config.js I define:

{
  "style": "/assets/global.css",
  "globalStylesheets": ["https://fonts.googleapis.com/css2?family=Kavoon&display=swap"]
}

and in the global stylesheet (src/assets/global.css) I add this rule:

:root {
    --serif: "Kavoon";
}

and this is the result: