Google fonts not loaded in generated static Nuxt app

My static Nuxt sites on Netlify were not using the Google Fonts I specified, even though the fonts worked during development.

/* assets/css/main.scss */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;800&display=swap");

/* ... */

// nuxt.config.js
// ...
css: [
    // https://eduardoboucas.github.io/include-media/
    // 'include-media/dist/_include-media.scss',
    // Global custom scss
    '@/assets/css/main.scss',
  ],
// ...

// pages/index.vue
<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&display=swap");

/* ... */
</style>

Hypothesis 1

Tailwindcss is purging the @import css

Solution?

I tried disabling Tailwind CSS purging.

// tailwind.config.js
module.exports = {
  purge: {
    enabled: false,
  },
  // ...
}

The font still did not load on the generated static site.

Final Solution

// nuxt.config.js
export default {
  // ...
  head: {
    // ...
    link: [
      // ...
      {
        rel: "stylesheet",
        href:
          "https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap",
      },
    ],
  },
  // ...
}