Nuxt 3 SSG - Font not included when using @nuxt/critters

[steffenstolze]

Hey there,

I realized that the Google font I'm using isn't included in the static sites generated with nuxt generate

assets/css/main.scss

/* rubik-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
  css: ['~/assets/css/main.scss'],
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/critters'],
  critters: {
    // https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      preload: 'swap',
      fonts: false,
    },
  },
});

Everything is working fine in dev (npm run dev) but not for the static pages. The font is just not loading.

As soon as I remove the critters module, it's there. I played around with fonts: true - didn't help.

Any idea?

Thanks!

[zefman]

I am hitting exactly the same problem

[danielroe]

whoa - I'm so sorry I'm slow to respond. do you have a reproduction, by chance?