Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mbostock opened this issue Dec 22, 2023 · 3 comments
Open

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

mbostock opened this issue Dec 22, 2023 · 3 comments
Labels
enhancement New feature or request

Comments

@mbostock
Copy link
Member

mbostock commented Dec 22, 2023

#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 mbostock added the enhancement New feature or request label Dec 22, 2023
@mbostock mbostock mentioned this issue Jan 6, 2024
Fil added a commit that referenced this issue Jan 9, 2024
`bundleStyles` correctly puts the `@import "url";` lines at the top of its text. In the preview or build scripts, we can easily detect these lines with RegExp and maybe remove them from the bundled CSS—though that is not even strictly necessary.

Hoisting them as stand-alone links is what will give the performance boost, and it's a bit more difficult, because in both cases (preview and render) we bundle much later than we link, so it looks like we have to change the order of operations. I think it's doable but I'm not fully there yet.
@mbostock mbostock added this to the Future milestone Jan 16, 2024
@mbostock mbostock changed the title Preload web fonts based on custom styles Preload and self-host web fonts based on custom styles Mar 4, 2024
@mbostock
Copy link
Member Author

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
Copy link
Contributor

Fil commented Mar 18, 2024

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
Copy link
Contributor

Fil commented Aug 22, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants