LaunchFast Logo LaunchFast

Astro Font ChangeLog

astro-font will automatically optimize your Custom Fonts, Local Fonts, Fonts over any CDN and Google fonts for performance.

astro-font@0.0.80 (latest)

In astro-font@^0.0.80, the CSS font parser for fonts loading over CDN such as Google Fonts, TypeKit, etc. has improved. It’s now able to map over each attribute of font-face property returned by CDN, and creates an equivalent CSS.

To create in-browser like requests, each outgoing request is appended with the 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36' header. This helps obtain the unicode-range which optimizes the in-browser font downloading as if the page doesn’t use any character in that range, the font is not downloaded at all.


In astro-font@^0.0.79, there are type values introduced for the following CSS properties, allowing you to choose the values based on standard web practices in your IDE.

To keep it backward compatible, any kind of string or number value is allowed.

Thank you Florian Lefebvre for this amazing contribution!




  • introduce per config verbose flag to create less noise in terminals


  • introduce fallbackName per config flag to allow customizing fallback font’s name


  • only use pathe for relativizing the paths to get POSIX like output for font paths (thanks to @florian-lefebvre for suggesting it & @pi0 for making pathe)


  • use pathe instead of relying on node:path to support all environments


  • custom patch duplicate axisIndex:o,axisIndex:o bug of the core fontkit library (thanks to @lukasborawski for reaching out and suggesting the fix)


  • add support for Google Fonts URLs + Any CDN URL that responds back with CSS


  • remove github-slugger as the package dependency


  • allow granular configuration of preloads per font per config
  • hide errors occured during determining write access (for lesser noise in terminals)


  • introduce cssVariable per config optional flag to ship font-family style in a CSS variable
  • make selector per config optional


  • gracefully handles non fallback-font computation scenarios
  • introduce fetch per config flag to decide which set of fonts to be localized
  • files are NOT fetched and localized by default, everything remains as-is to provide a better DX
  • gracefully handles non-caching scenarios
  • got rid of custom .astro_font directory for caching (less things to see/learn)


Learn More Injecting Environment Variables Dynamically in Cloudflare Pages → Using Unplugin Icons in Next.js: A Step-by-Step Guide → Using Unplugin Icons in SvelteKit: A Step-by-Step Guide →