如何在 Nuxt 中本地托管 google 字体

Question

我正在使用 vue 2.6 和 nuxt 2.14.

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

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

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

我在我的项目中找不到对 google fonts 的任何 https 请求，但 url 请求在 .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;
}

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

我想在本地托管字体而不是来自 google 服务器。

我错过了什么？

Answer 1

不久前有人问过这个问题。这是我的解决方案：

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

如何在 Nuxt 中本地托管 google 字体

How to host google fonts locally in Nuxt

vuejs2

fonts

nuxt.js

google-fonts