css with both woff2 (with unicodeRange) + woff sources loads both
#204
Comments
|
Hey there, @neobutter! I'm Dosu, a bot here to help you with bugs, questions, and becoming a contributor. Let me know how I can assist you! 🤖 The issue of WOFF fonts being downloaded instead of WOFF2 fonts in your Nuxt project can be fixed by ensuring that the font sources are correctly specified as WOFF2 in your configuration. From your provided CSS, it appears that the However, the presence of WOFF fonts without Here is an example of how you can structure your @font-face {
font-family: 'Roboto';
src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk-0OGiuKW0Qv.woff2) format('woff2');
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
font-weight: 400;
font-style: italic;
}
/* Repeat for other unicode ranges and styles */Ensure that all your Additionally, you can check your Nuxt configuration to ensure that it is set up to prioritize WOFF2 fonts. Here is an example configuration: export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
families: [
{ name: 'Roboto', src: '/path-to-roboto.woff2' },
// Add other fonts as needed
],
},
});By ensuring that your configuration and CSS prioritize WOFF2 formats, you can resolve the issue of WOFF fonts being downloaded instead of WOFF2 fonts [1]. |
|
I still don't get this. I want to include woff2 and woff, but somehow in my @font-face {
font-family: Lufga;
src: url(/fonts/custom-thin.woff) format(woff),
url(/fonts/custom-thin.woff2) format(woff2);
font-display: swap;
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: Lufga;
src: url(/fonts/custom-extra-light-italic.woff) format(woff),
url(/fonts/custom-extra-light-italic.woff2) format(woff2);
font-display: swap;
font-weight: 200;
font-style: italic;
}
/* ... */Why isn't this automatically done? |
|
@stijns96 Would you provide a reproduction, please? 🙏 I take it you're using the local provider? |
danielroe
changed the title
unicodeRange) + woff sources loads both
|
Is there a fix for this? The browsers ends up loading a 66 KB woff font for me, instead of an 8 KB woff2. This module does more harm than good for optimization (for those who do not check). 😢 |
|
would you be happy with only the woff2 font being loaded? |
I can't speak for everyone. But for my projects, woff2 is all I need. I appreciate the work on this. Didn't mean to sound direct. Just not sure if people check the size of what is being served, and bandwidth is expensive. Thank you for all you do fot Nuxt! 🍻 |
|
Hi @danielroe , I think I rather only load woff2 and use a fallback font, then loading woff. But that some personal preference |
|
Also, 🍻 |
I created a simple example from the official site of Nuxt font.
https://stackblitz.com/~/github.com/neobutter/nuxt-font-woff2
If you run this project, you will see that you are downloading WOFF fonts, not WOFF2 fonts.
As far as I analyzed, the generated css file has unicode-range set for woff2 fonts, but not for woff fonts.
(This can also be checked via Nuxt dev tools).
My guess is that woff doesn't have unicode-range, so it loaded woff fonts instead of woff2.
I'm currently working on a project, and this issue prevented me from using this module. (I used google-fonts (https://google-fonts.nuxtjs.org/).
If this is a bug, I would appreciate a fix.
(I am not a native English language speaker, please forgive me if I was rude).
The text was updated successfully, but these errors were encountered: