css with both woff2 (with `unicodeRange`) + woff sources loads both #204

neobutter · 2024-07-22T14:17:41Z

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).

@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
}

@font-face {
    font-family: "Roboto Fallback: Arial";
    src: local("Arial");
    size-adjust: 99.7809%;
    ascent-override: 92.9771%;
    descent-override: 24.4677%;
    line-gap-override: 0%
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk-FtUkPdqKUJ.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: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk-hpp7JRBVzs.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+1F00-1FFF;
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk-GW4TW82VwC.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk-o3jsGxQAtr.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk-9a09QjonqI.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu51xIIzIXKMny-qOuywMEC2V.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz-O9XKdmxavM.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: normal
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz-FqAWiXi2ZB.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: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz-6HweffhGyI.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+1F00-1FFF;
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz-pW7uC1Xcsx.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz-zggmXoxUPL.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz-NqIDrIk3Rk.woff2) format(woff2);
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Mu4mxKKTU1Kg-2ZlIYAHJdJ.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+2074, 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: Roboto;
    src: local("Roboto Regular Italic"), local("Roboto Italic"), url(/_fonts/KFOkCnqEu92Fr1Mu52xM-gaQaf7WhjM.woff) format(woff);
    font-display: swap;
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: local("Roboto Regular"), local("Roboto"), url(/_fonts/KFOmCnqEu92Fr1Me5g-h5LDVhWuVU.woff) format(woff);
    font-display: swap;
    font-weight: 400;
    font-style: normal
}

div[data-v-51c93bf8] {
    font-family: Roboto, "Roboto Fallback: Arial", sans-serif
}

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).

dosubot · 2024-07-22T14:48:18Z

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 @font-face rules are correctly specifying WOFF2 fonts with unicode-range.

However, the presence of WOFF fonts without unicode-range might be causing the browser to prioritize them. To ensure WOFF2 fonts are prioritized, you can explicitly specify the WOFF2 format first and ensure that WOFF fonts are not included unless necessary.

Here is an example of how you can structure your @font-face rules to prioritize WOFF2:

@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 @font-face rules prioritize WOFF2 and avoid including WOFF formats unless absolutely necessary. This should help the browser to load WOFF2 fonts first.

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].

To continue talking to Dosu, mention @dosu.

stijns96 · 2024-08-21T06:09:24Z

I still don't get this. I want to include woff2 and woff, but somehow in my @font-face it puts the woff before the woff2. So woff to is prioritised now instead of woff2.

@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?

danielroe · 2024-09-23T10:40:40Z

@stijns96 Would you provide a reproduction, please? 🙏 I take it you're using the local provider?

danielroe · 2024-09-23T11:35:04Z

let's track the wrong woff2 priority in #135 - now resolved in b087d47.

... and leave this issue to track woff2 not being loaded due to unicodeRange.

neobutter mentioned this issue Jul 22, 2024

Question: How to fetch only woff2 format? #195

Closed

danielroe closed this as not planned Won't fix, can't repro, duplicate, stale Sep 23, 2024

danielroe reopened this Sep 23, 2024

danielroe changed the title ~~Woff2 font priority~~ css with both woff2 (with unicodeRange) + woff sources loads both Sep 23, 2024

danielroe added bug Something isn't working provider labels Sep 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css with both woff2 (with `unicodeRange`) + woff sources loads both #204

css with both woff2 (with `unicodeRange`) + woff sources loads both #204

neobutter commented Jul 22, 2024

dosubot bot commented Jul 22, 2024

stijns96 commented Aug 21, 2024

danielroe commented Sep 23, 2024

danielroe commented Sep 23, 2024 •

edited

Loading

css with both woff2 (with unicodeRange) + woff sources loads both #204

css with both woff2 (with unicodeRange) + woff sources loads both #204

Comments

neobutter commented Jul 22, 2024

dosubot bot commented Jul 22, 2024

stijns96 commented Aug 21, 2024

danielroe commented Sep 23, 2024

danielroe commented Sep 23, 2024 • edited Loading

css with both woff2 (with `unicodeRange`) + woff sources loads both #204

css with both woff2 (with `unicodeRange`) + woff sources loads both #204

danielroe commented Sep 23, 2024 •

edited

Loading