fix(preset-web-fonts): fix creation of import URL for bunny
#2766
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site settings. |
arunanshub
changed the title
|
Can you explain what is happening and why this fix would need? I guess it should be bunny's responsibility to align with Google's params? |
@antfu As highlighted in the linked issue, it simply fixes how the import URL is created. Earlier, it used to create the URL in a Google Fonts compatible manner. However, it seems like Bunny has a new way of specifying how fonts are loaded.
It does work with Google's params when executed in a browser, but strangely refuses to work with UnoCSS when configured via unocss/packages/preset-web-fonts/src/index.ts Lines 58 to 74 in 698a7e6
This is not an issue with UnoCSS' caching. The important point here is that it only fails with Bunny, not Google. Hence if both are equally compatible with each other, and Google's loader works but Bunny's loader fails, it can be safely said there is something wrong with Bunny's loader. InvestigationI've decided to fetch the import URLs manually to see if it is an issue with the URLs itself. I'll use Tor browser to perform the tests. Using Google Fonts compatible URL with BunnyHere, I use the following import URL: Details/* latin */
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
However, if we modify the URL such that a different font is used: Here, we swap Anton with Roboto and fetch again on a new tab of Tor Browser: Details/* latin */
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
We can see that Bunny Fonts is somehow caching the calls. Using Bunny's import URL formatDetails/* latin */
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
We now swap Details/* latin */
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/audiowide/files/audiowide-latin-400-normal.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
We can see that it's working the way it should. |
If the weights argument is null or an empty array, we skip the iteration and apply the italic variant if flag is set.
zyyv
changed the title
bunny
|
It does sound like a bunny issue isn't it? I am still not very sure if we should keep the complexity on us. |
While the issue indeed lies with Bunny fonts trying to be compatible with Google, it is essential to note that the proposed fix is relatively straightforward and can be implemented within approximately 10 lines of code. Plus, we should see Bunny as a separate font provider service and a privacy-respecting competitor to Google Fonts. |
Fixes the issue #2574.