Feature request: being able to add fonts to the head of a page so we can prevent FOUT

[pfeodrippe]

When opening https://clerk.vision/ in Chrome (didn't try it in other browsers), we have some FOUT happening as the font loading takes some time.

One way of trying to solve this (which I've tested locally and it worked for Chrome at least) would be to add fonts to the head of the page at nextjournal.clerk.view/->html (and also for the static app). We could pass options through the call to main or some other function that keeps an atom with the options we want to be used, let me know what you think o/

[mk]

This would indeed be handy. Sketched a PoC in 7219298b3028bdbc1374a163a64e8b5563ce5ac2.

I think we'd want to support both a global and a per-notebook setting. What's a bit annoying is that the head isn't rendered by react so folks would need to reload the page to make this work but maybe that's fine as a start?

[pfeodrippe]

This would indeed be handy. Sketched a PoC in 7219298.

I think we'd want to support both a global and a per-notebook setting. What's a bit annoying is that the head isn't rendered by react so folks would need to reload the page to make this work but maybe that's fine as a start?

Awesome, thanks! It seems perfect

[mk]

With https://clerk.vision we went with an approach using alter-var-root instead, see https://github.com/nextjournal/clerk-website/commit/e451a0418f6f282c211f81a07882400a088b60c0.

Since this gives you maximum flexibility (append, prepend, modify) I'm wondering if we should make this the recommended way instead.

[elken]

I've tried the above here which works perfectly with the caveat that the styles are injected twice (the ID is only there so I could quickly verify this issue)