Nothing work in production with Nuxt 3.8.0 (caused by Cssnano > 6.0.0)

[luca-smartpricing]

I think the problem was the new version of Cssnano that remove the quote inside @font-face src url()

This work: src: url("/_nuxt/Inter-100 900-7.88df0b5a.woff2") format("woff2"); This doesn't work: src: url(/_nuxt/Inter-100 900-7.88df0b5a.woff2) format("woff2");

I "solved" it by disabling this optimization: normalizeUrl

In Nuxt config:

export default defineNuxtConfig({
  postcss: {
      plugins: {
        cssnano: {
          preset: ['default', {
            /* NOTE: prevent break url in google-font @font-face */
            normalizeUrl: false
          }]
        }
      }
  }
})

Can you fix the problem some other way that doesn't involve changing Cssnano settings?

[ricardogobbosouza]

Sorry for the delay... Could you let me know if the problem continues? I couldn't reproduce

[devzenfr]

Same issue here. My googleFonts config is:

googleFonts: {
    display: "swap",
    download: true,
    overwriting: true,
    // preload: true,
    families: {
      Rubik: {
        wght: "300..900",
      },
    },
  },

The generated css was the following one:

@font-face{
    font-display:swap;
    font-family:Rubik;
    font-style:normal;
    font-weight:300 900;
    src:url(/_nuxt/Rubik-300 900-1.bc857679.woff2) format("woff2");
    unicode-range:u+06??,u+0750-077f,u+0870-088e,u+0890-0891,u+0898-08e1,u+08e3-08ff,u+200c-200e,u+2010-2011,u+204f,u+2e41,u+fb50-fdff,u+fe70-fe74,u+fe76-fefc
}
@font-face{
    font-display:swap;
    font-family:Rubik;
    font-style:normal;
    font-weight:300 900;
    src:url(/_nuxt/Rubik-300 900-2.452feb2a.woff2) format("woff2");
    unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f
}
@font-face{
    font-display:swap;
    font-family:Rubik;
    font-style:normal;
    font-weight:300 900;
    src:url(/_nuxt/Rubik-300 900-3.a7ad9db1.woff2) format("woff2");
    unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116
}
@font-face{
    font-display:swap;
    font-family:Rubik;
    font-style:normal;
    font-weight:300 900;
    src:url(/_nuxt/Rubik-300 900-4.95d333fe.woff2) format("woff2");
    unicode-range:u+0590-05ff,u+200c-2010,u+20aa,u+25cc,u+fb1d-fb4f
}
@font-face{
    font-display:swap;
    font-family:Rubik;
    font-style:normal;
    font-weight:300 900;
    src:url(/_nuxt/Rubik-300 900-5.f4bbc2bf.woff2) format("woff2");
    unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff
}
@font-face{
    font-display:swap;
    font-family:Rubik;
    font-style:normal;
    font-weight:300 900;
    src:url(/_nuxt/Rubik-300 900-6.47374cb7.woff2) format("woff2");
    unicode-range:u+00??,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
}

It didn't work on production (Safari and Firefox) even if it worked locally. I tried the fix from @luca-smartpricing and it resolved the issue.

(thanks a lot @luca-smartpricing, I spent way too much time on this)

[luca-smartpricing]

Sorry for the delay... Could you let me know if the problem continues? I couldn't reproduce

Hi @ricardogobbosouza! Sorry, I was on vacation these days. I have updated nuxt to 3.8.2 and @nuxtjs/google-fonts to 3.1.0.

Without normalizeUrl: false the problem persist.

[ricardogobbosouza]

The problem is in the font name.

It was corrected https://github.com/datalogix/google-fonts-helper/releases/tag/v3.4.1

Tomorrow I will release a patch with fixes.

[ricardogobbosouza]

Fixed https://github.com/nuxt-modules/google-fonts/releases/tag/v3.1.1

[luca-smartpricing]

@ricardogobbosouza I'm sorry, but the problem persist. The URL without string (normalizeUrl: true) doesn't work (on build. Hosting: Netlify) Maybe the problem could be the space between the weight (100 900)? Can you try to create an URL without white space? Maybe it work.

I use this two variable fonts

  googleFonts: {
    families: {
      Inter: {
        wght: '100..900'
      },
      'Space Grotesk': {
        wght: '300..700'
      }
    }
  },

[ricardogobbosouza]

@luca-smartpricing For some reason it generated the wrong version, try v3.1.3

[luca-smartpricing]

@ricardogobbosouza Nope, sorry, the problem wasn't fixed . Same workaround: cssnano normalizeUrl: false. Couldn't the white space be the problem? Thanks for trying =)

[ricardogobbosouza]

try reinstalling the dependencies

I created a test project and it worked https://app.netlify.com/sites/courageous-croquembouche-5936e0/deploys/6579c3f9bcfc950008c47eaa

[luca-smartpricing]

@ricardogobbosouza Thank you sir! I cleared the Netlify cache and now it works perfectly! I should have thought of it before. Thanks again!