[fontless] google provider includes both woff2 and woff in css and browser downloads larger woff #656
Description
🐛 The bug
For example, "Geist" font with a google provider generates following css and fonts:
vite v7.1.7 building for production...
✓ 4 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/_fonts/8wPfcoHgr5Ter5bX5nby9AYSJ3tcrH6YNYAjJskdTgA-HUyV8UDd4FfLrabYnx9hU5HB6Bz0BzVqUPq_kmox9qw.woff2 6.02 kB
dist/assets/_fonts/OEfYKavu72zEJZaMmF8LR5AhBFI8mM0D-yiJeZ026n4-wOqGmJOcQBFojrtQwZC8dC9hjn4yqahQA5lPUyKZef0.woff2 7.14 kB
dist/assets/_fonts/9NWry0RdjlO25wQTUN08rQDLT7JbTgMLFDHXNXTsBCI-OYJaa3By4yHtTRzsl_QHx7BCWYAqkzDzqkMtAkz8HuU.woff2 12.56 kB
dist/assets/_fonts/v1uIKycIfkgtdywcltIrSda4-zIfiQI75rj_JBTihK4-tLsgS02EWmw3MqYswh3by5wycuykMb_DXfgJWht06Q0.woff 33.00 kB
dist/assets/index-zbybevHv.css 1.91 kB │ gzip: 0.85 kB
dist/assets/index-D_A_Nox2.js 1.33 kB │ gzip: 0.57 kB
✓ built in 80ms@font-face {
font-family: "Geist";
src:
local("Geist Regular"),
local("Geist"),
url("/assets/_fonts/8wPfcoHgr5Ter5bX5nby9AYSJ3tcrH6YNYAjJskdTgA-HUyV8UDd4FfLrabYnx9hU5HB6Bz0BzVqUPq_kmox9qw.woff2")
format(woff2);
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Geist Fallback: Arial";
src: local("Arial");
size-adjust: 104.7553%;
ascent-override: 95.9379%;
descent-override: 28.1609%;
line-gap-override: 0%;
}
@font-face {
font-family: "Geist";
src:
local("Geist Regular"),
local("Geist"),
url("/assets/_fonts/OEfYKavu72zEJZaMmF8LR5AhBFI8mM0D-yiJeZ026n4-wOqGmJOcQBFojrtQwZC8dC9hjn4yqahQA5lPUyKZef0.woff2")
format(woff2);
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Geist";
src:
local("Geist Regular"),
local("Geist"),
url("/assets/_fonts/9NWry0RdjlO25wQTUN08rQDLT7JbTgMLFDHXNXTsBCI-OYJaa3By4yHtTRzsl_QHx7BCWYAqkzDzqkMtAkz8HuU.woff2")
format(woff2);
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Geist";
src:
local("Geist Regular"),
local("Geist"),
url("/assets/_fonts/v1uIKycIfkgtdywcltIrSda4-zIfiQI75rj_JBTihK4-tLsgS02EWmw3MqYswh3by5wycuykMb_DXfgJWht06Q0.woff")
format(woff);
font-display: swap;
font-weight: 400;
font-style: normal;
}When previewing the build, I see largest woff being downloaded http://localhost:4173/assets/_fonts/v1uIKycIfkgtdywcltIrSda4-zIfiQI75rj_JBTihK4-tLsgS02EWmw3MqYswh3by5wycuykMb_DXfgJWht06Q0.woff.
🛠️ To reproduce
https://stackblitz.com/edit/github-obxytuqo?file=vite.config.ts
This reproduction uses pkg.pr.new from #654. Google is blocked on Stackblitz, so please test it locally.
🌈 Expected behaviour
Css should be rendered in a way woff2 is prioritized. I'm not sure but maybe this is because of woff is not subsetted (without unicode-range), so browser is picking that up.
I think we need to either just remove woff (which is coming from meta.priority = 1 of unifont), or merge it properly inside single @font-face like src: url(...woff2), url(...woff).
ℹ️ Additional context
This also affects the effectiveness of preload. Currently woff2 is preloaded, but if browser downloads woff instead, then preload is meaningless.
I saw an issue on nuxt nuxt/nuxt#33119 and @nuxt/font probably has the same issue.