Replace Google Fonts with Fontsource import to improve Keystatic CMS performance, enable offline usage, and improve user privacy

[Greenheart]

Hi!

First of all, thanks for creating such a useful and polished Git-based CMS!

Proposal

Consider replacing Google Fonts with https://github.com/fontsource/fontsource and install their npm modules to bundle fonts together with the code and completely remove the need for sending requests to Google Fonts. This would enable offline usage of Keystatic CMS in scenarios where the Google font has not yet been cached, improve performance for all users (especially with slow network conditions) and improve privacy by not letting Google track font requests.

Fontsource has been a big improvement in most of my projects in the past years, and I strongly recommend Keystatic to load fonts using this method as well: https://fontsource.org/docs/getting-started/introduction

There are currently three code locations that would need to be updated https://github.com/search?q=repo%3AThinkmill%2Fkeystatic%20fonts.google&type=code

It would make sense to solve https://github.com/Thinkmill/keystatic/issues/1292 at the same time as switching the loading strategy of the fonts.

[Greenheart]

I tried to make this change and submit a PR, but didn't get it to work properly with the design system.

Until this is changed in @keystatic/core, here's a quick way to solve this if your project uses Vite (e.g. SvelteKit, Astro, Remix):

// vite.config.ts
import { defineConfig, type Plugin } from 'vite'

function ensureGDPRCompliantFonts(): Plugin {
  const fontsURLRegex = /fonts\.googleapis\.com\/css2/g
  const replacement = 'fonts.bunny.net/css'
  return {
    name: 'gdpr-compliant-fonts',
    enforce: 'post',
    transform(code) {
      if (fontsURLRegex.test(code)) {
        return code.replaceAll(fontsURLRegex, replacement)
      }
    },
  }
}

export default defineConfig({
  plugins: [ensureGDPRCompliantFonts()],
})