Bug with importing fonts in `nuxt.config.ts`

[manLuke]

Environment

• Node Version: v16.11.1
• Nuxt Version: 3.0.0-rc.4
• Package Manager: [email protected]
• Builder: vite
• User Config: css
• Runtime Modules: -
• Build Modules: -

Reproduction

    link: [
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css2?family=Poppins:ital@0;1&display=swap'
        }
    ],

Describe the bug

Nuxt has a problem importing google fonts from nuxt.config.ts

Additional context

I noticed this when I was converting my site from vue to nuxt. The font was different and the css broke on my site, I had to solve it by importing the font in main.css

Logs

No response

[danielroe]

Would you provide a reproduction? 🙏

[jaythegeek]

I am having a similar issue, this is my nuxt.config.js - I am then using the import in the tailwind.config.js

One thing to note, this is working perfectly on dev, it only breaks on prod.

If I import it in the main.css as suggested above, it is fine. If I get chance I will test it on a fresh setup and post a link to a repo, in the meantime, I am not really sure why it wouldn't work like this below.

head: {
    link: [
      { rel: "preconnect", href: "https://fonts.gstatic.com" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
      },
    ],
},

[hacknug]

I'm using Google Fonts on my project and everything seems to work fine. Care to elaborate a little more on what the issue is?

Here's my code in case it helps:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  meta: {
    link: [
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap' },
    ],
  },
})

[danielroe]

FYI (and this may be the issue also with @jaythegeek if you are just setting head) the config key to use is app.head:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "preconnect", href: "https://fonts.gstatic.com/" },
        //
      }
    }
  }
})