Ship fonts directly with Keystatic instead of using Google Fonts API

[yeskunall]

Hello!

If a site has strict CSP headers, Keystatic is unable to load remote resources (as expected, so not blaming Keystatic at all). Here’s my website’s CSP headers (applied in production, too)

content-security-policy: child-src 'none'; connect-src *; default-src blob: data: 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src blob: data: 'self' https://assets.literal.club https://stats.kimchiii.space; manifest-src 'self'; media-src 'self'; object-src 'none'; sandbox allow-forms allow-popups allow-same-origin allow-scripts; script-src 'self' 'unsafe-eval' 'unsafe-inline' cdn.vercel-insights.com; script-src-elem 'self' 'unsafe-eval' 'unsafe-inline' https://stats.kimchiii.space; style-src 'self' 'unsafe-inline'; style-src-attr 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; worker-src 'self';

I would like to limit this discussion to the issue of loading external fonts only. In this case, it looks like Keystatic depends on Inter. Would you guys be down to ship the font with Keystatic?

I go out of my way to avoid pinging any Google server(s) if I can. So, while I can permit a couple endpoints (like https://avatars.githubusercontent.com for loading my GitHub avatar), I am not too keen on permitting https://fonts.googleapis.com. Both for my own privacy, and for the sake of the users who visit my website*.

If you guys are willing to take this discussion further, I propose one of 2 suggestions:

1. Drop external fonts and use system fonts instead
2. Use something like Bunny Fonts or Fontsource as a(n almost) drop-in replacement for Google Fonts

There’s pros/cons to both approaches. First approach will no longer ensure Keystatic users have a similar experience (typography-wise) when using Keystatic across different browsers/OSes. The second approach will increase the bundle size.

But I still think both options are worth considering, here’s why:

1. System fonts have come a long way, and the system defaults look a lot better these days
2. Shipping all of Inter (even if you use the WOFF2 format) will still add ~4.8MB to the bundle size. But if you continuing using the 4 weights as you are now, then I think the increase is bundle size is negligible, compared to what you gain in terms of privacy. There’s also the added benefit of one less network request avoided just to download the font.

Screenshot of browser console error

Thanks for reading all of this!

---

When I embed Google Fonts in my website via the Google Fonts Web API, what data does Google receive from my website visitors?*