After I run astro build, the integration @astrojs/tailwind bundles the font as base64, see the image below.
Seriousness
This almost doubles the size of the final CSS file. When I manually run tailwind -o output.css --minify, I got a 18KB CSS. But the size of the CSS generated by @astrojs/tailwind reaches 40KB.
I believe we are all concerned about web performance, and that's why I love Astro. But this unexpected behavior is frustrating.
What I've Found
Base64 is only applied to inter-vietnamese-[weight]-[variant].[hash].woff2. Variants like Latin or Greek all work as expected.
It's not reproducible on Stackblitz, etc. So I deployed it on Vercel. Check about.[hash].css in DevTools Network, and you shall see the bloated CSS.
What version of
astro
are you using?1.6.0
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
pnpm
What operating system are you using?
WSL2 - Arch
Describe the Bug
Problem
I use
@fontsource/inter
as a package in my project, and customize font family intailwind.config.js
:After I run
astro build
, the integration@astrojs/tailwind
bundles the font as base64, see the image below.Seriousness
This almost doubles the size of the final CSS file. When I manually run
tailwind -o output.css --minify
, I got a 18KB CSS. But the size of the CSS generated by@astrojs/tailwind
reaches 40KB.I believe we are all concerned about web performance, and that's why I love Astro. But this unexpected behavior is frustrating.
What I've Found
inter-vietnamese-[weight]-[variant].[hash].woff2
. Variants like Latin or Greek all work as expected.about.[hash].css
in DevTools Network, and you shall see the bloated CSS.Source Code
https://github.com/mrcaidev/mrcai.dev
Link to Minimal Reproducible Example
https://mrcai.dev
Participation