We want to serve local fonts in the fastest way possible on our websites.

Why local?

Because we don’t want to send our users’ data to Google or Adobe. It would also require us to use a cookie banner, which nobody likes. Finally, with our Cloudflare caching, we can serve fonts faster than reaching out to Google or Adobe.

NOTE: We never use Adobe-exclusive fonts because their terms REQUIRE you to send user data to their API.

Web-ify your fonts

You will need WOFF2 files. WOFF2 has widespread support: https://caniuse.com/woff2

It is the recommended modern method: https://stackoverflow.com/a/11002874

In most open source typefaces, you can find WOFF2 files in their .zip downloadable.

Else, use the following tools to convert them:

• https://everythingfonts.com/ttf-to-woff2
• https://www.fontsquirrel.com/tools/webfont-generator

Save your WOFF2 files in your Astro project under public/fonts.

Each WOFF2 file is a typeface. Follow this naming convention:

• typeface-name--font-weight-number.woff2
• spline-sans--700.woff2
• libre-franklin-italic--400.woff2

Install astro-font

Here is the npm page for astro-font: https://www.npmjs.com/package/astro-font

Here is the Github page: https://github.com/rishi-raj-jain/astro-font

Run the following in your terminal: