i used fontsource to bundle the fonts used here and deployed on cloudflare pages . i can say that its definitely faster than using google fonts and provides better ux.

earlier i was using google fonts and was running into FOUT (flash of unstyled text), here with astro i’ve added preload links to the fonts and now there is not fout.

fontsource packages fonts as npm packages , just install and import.

pnpm add @fontsource/sofia

@import "@fontsource/sofia/400.css";

to add preload links

import sofiaWoff2 from "@fontsource/sofia/files/sofia-latin-400-normal.woff2?url";

<link
  rel="preload"
  href="{sofiaWoff2}"
  as="font"
  type="font/woff2"
  crossorigin
/>