问题标签 [webfont-loader]

使用谷歌字体时是否可以通过谷歌页面速度？我发现这种代码和平（https://github.com/typekit/webfontloader）也是谷歌推荐的。但即使我加载这个脚本，我也无法通过谷歌页面速度。

我正在学习开发 WordPress，并从头开始构建我的主题。我读到将 Google 字体包含在主题中的最佳方法是使用 WebFont Loader。此方法有助于提高 PageSpeed 测试中的分数。

我尝试从 function.php 和 wfloader.js 文件添加 WebFont Loader。不幸的是，字体没有加载到我的主题中。我究竟做错了什么？我无法弄清楚自己。

所以这是我在function.php文件中的代码：

这是来自wfloader.js

感谢您的任何建议！

首先对不起我的英语。我错过了什么？我使用以下代码来防止呈现阻塞内容：

没有成功 speedtest 抱怨渲染阻塞字体（async = true）...... 我想知道是否有另一种方法可以防止这种渲染阻塞......

我正在尝试使用 webfontloader自定义模块在节点上加载字体，如下所示：

这是我的 fonts.css 文件：

我尝试在 fonts.css src 字段和 webfontloader 的 custom.url 上同时使用绝对路径和相对路径，但我无法让它工作，它总是进入 inactive()。我找不到 webfontloader 加载字体的真实工作示例，我可以在其中验证路径和格式，我也尝试过调试 webfontloader.js 但由于找不到非缩小版本，因此很难理解发生了什么.

知道如何解决这个问题吗？

如何在 Angular 中使用字体加载器，例如 WebFontLoader 或 FontFaceObserver？

我不确定我需要导入什么/在哪里以及如何在组件中使用它。

我正在研究一段动态加载谷歌字体的代码。

该页面的某些内容是在 iframe 中加载的（在同一个域来源上）。我正在努力在 iframe 中加载和应用 Web 字体。我可以访问父文档和 iframe。这是我的代码：

这是 iframe 内容代码：

我尝试使用此处概述的“上下文”变量： https ://github.com/typekit/webfontloader

但我没能成功。

提前致谢！

我正在使用 webpack encore 设置 webfont-loader 但没有任何反应。不生成字体或 css。

我不知道我的配置文件中是否遗漏了一些东西。

运行 webpack 后没有显示错误。

我在应用程序中使用 Google 字体。当我从本地开发环境请求字体时，它返回正常。但是，当我从 Firebase 托管的应用程序请求时，由于 Referer 标头，我得到了 403。

请求网址：

当我使用此标头（自动应用）发出请求时，它可以工作：

当我对这个提出同样的要求时，它失败了。（使用 app + Postman 测试。）

有没有办法用 webfontloader 更改Referer 以便能够发出这个请求？

也许我误解了 Font Face Observer 的工作原理。我的理解是，这允许您仅在使用时加载字体。但无论我在代码中输入什么字体，它总是将其加载到浏览器中。下面的示例代码。如果加载所有字体，这不会使我的页面“沉重”吗？特别是如果我没有使用所有字体？这部分描述让我感到困惑：

与 Web Font Loader Font Face Observer 不同，Font Face Observer 使用滚动事件来有效地检测字体加载，并且开销最小。

当您向下滚动时，这听起来像我，它会检测是否正在使用字体，如果是，则加载它。另外，如果我没有指定权重，说 Roboto 的字体加载器是否会加载所有可用的权重？

当它运行时，我在控制台中看到：

所以回顾一下，这个字体加载器的目的是加载我指定的所有字体吗？如果我只使用没有特定权重的字体名称，它会自动加载所有权重吗？还是我还需要为每种字体添加我想使用的每个重量？

问题：

不同的字体需要在包含此字体的元素上使用不同的样式。该组件的样式在 JS 中计算。当 webfont 加载字体并在 DOM 中更改它时，我的组件没有被刷新。我想使用 Webfontloader 回调来强制这个组件重新加载。Webfont 配置在顶层指定 - index.js（在 App.js 之上）：

如何以优雅的方式刷新该元素（不会将道具传递得太深，通过所有父元素）？

谢谢！