如何在 Nuxt 本地托管谷歌字体答案

【问题标题】：How to host google fonts locally in Nuxt如何在 Nuxt 本地托管谷歌字体
【发布时间】：2026-01-22 04:00:02
【问题描述】：

我正在使用 vue 2.6 和 nuxt 2.14。

我正在努力提高我的网站性能。

为此，我下载了 google 字体并将 .woff2 文件传递给 @font-face() in nuxt.config.js。

但是当我在网络中检查时，它仍然从谷歌服务器获取字体数据。

我在我的项目中找不到对google fonts 的任何https 请求，但请求网址在.nuxt/index.js 构建文件中。

.nuxt/index.js

{
  "rel": "stylesheet",
  "type": "text\u002Fcss",
  "href": "https:\u002F\u002Ffonts.googleapis.com\u002Fcss family=Roboto:100,300,400,500,700,900&display=swap"
}

我在项目中搜索以找出此请求的来源。

除了这个.nuxt/index.js之外我找不到任何东西

我什至删除了所有字体，但不知何故，它仍然再次从google server 获得fonts。

在我的完整项目中没有fonts.gstatic.com 的踪迹，包括.nuxt 构建文件。

这是我到目前为止所做的。

nuxt.config.js

links: [{
  rel: 'stylesheet',
  href: '/fonts/roboto/fonts.css'
}]

Some of the fonts

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto'), url(./KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto'), url(./KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto'), url(./KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

这里我已经下载了所有的字体。

我想在本地而不是从谷歌服务器托管字体。

我错过了什么？

【问题讨论】：

标签： vuejs2 fonts nuxt.js google-fonts

【解决方案1】：

这个问题是不久前提出的。这是我的解决方案：https://*.com/a/68166329/8816585

试一试，这是在构建期间使用@nuxtjs/google-fonts 获取一些简单的本地字体并且效果很好！

【讨论】：