使用Nuxt4的@nuxtjs/google-fonts模块可以轻松加载Google字体。

安装

npx nuxi@latest module add google-fonts

在nuxt.config.ts 中添加 @nuxtjs/google-fonts模块：

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts']
})

配置字体

在 googleFonts 中添加 options, 例如 配置要用到的字体

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts']，
  googleFonts:{
    families:{
      'Public Sans':[400,700]，
      Roboto: true,
      Raleway: {
        wght: [100, 400],
        ital: [100]
      },
    }
  },
})

或者直接在模块声明中配置，两者等价

export default defineNuxtConfig({
  modules: [
    ['@nuxtjs/google-fonts'.{
      families: {
        'Public Sans': [400, 700],
        Roboto: true,
        Raleway: {
          wght: [100, 400],
          ital: [100]
        },
      }
    }]
  ],
})

设置预加载

为防止字体加载导致页面闪烁，建议设置预加载。

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    preload: true,
    families: {
      Roboto: true
    }
  },
})

此选项将预加载注入到项目的头部。

<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" />