加载Fonts.com网络字体在Chrome中不起作用(但仅在部署时?)

时间:2017-11-16 03:29:46

标签: javascript reactjs google-chrome fonts gatsby

我目前正在通过GitHub页面举办React / Gatsby项目,我一直在搞乱fonts.com及其网络字体系统以获取Rockwell字体。我按照将脚本标记输入到代码部分的说明进行操作:

<script type="text/javascript" src="//fast.fonts.net/jsapi/0a390850-37c6-420c-8ead-c15e81202559.js"></script>

在引用我的域名时,我遵循了他们的所有建议,并且我遇到了这个有趣的错误。

  1. 字体在Firefox中正常加载。

    一个。更新:这不是真的,它也被缓存在那里。

  2. 当我跑步时,字体也会加载&#39; gatsby develop&#39;并让我的项目在localhost:8000

    中运行

    一个。 (我知道它在localhost中有效,因为我使用了漂亮的&#34;空缓存和硬重载&#34; Chrome的功能。)

  3. 然而,当我在Chrome中提取页面时,我收到以下错误

    GET https://fast.fonts.net/dv2/14/8dd355f9-1a9a-4d91-8aa1-7dcc9deeb439.woff2?d44f19a684109620e4841578a490e8187cac2bf7466ecccd35f843ec9e8410dc73fea4cea7acbbbaf9d830e48fc615a792f4b24a1c10853efb77f66879fc39a15a09593f079cf7a38cb48dd4836fa2ebba1b54d33b577d893508a6f4d0526453533728dec4671fee2d130ac32d5b8a97d5&projectId=0a390850-37c6-420c-8ead-c15e81202559 net::ERR_ABORTED
    
  4. 所以要么出现,要么我得到403错误。 (我已经按照他们发布的关于解决403错误的建议。)

    我用谷歌搜索并搞砸了无用。我发现了一个类似的问题,建议在css中使用@import,但这不起作用,因为它是一个javascript文件

    据我所知,它与加载字体的woff2部分有关,但我不能把它拿出来,因为它是一种网络字体。不知何故导致net :: ERR_ABORTED。它可能与盖茨比的出版方式有关吗?或者也许React如何在?

    中处理脚本标记

    感谢您提供任何建议!

    更新:Firefox缓存了它。这让我相信Webpack正在搞乱脚本标签/下载的东西。

1 个答案:

答案 0 :(得分:0)

好吧所以我解决了这个问题。 虽然该项目是在项目域(www.mywebsite.com/project)上托管的,但我在网络调用中深入了解到请求本身来自常规域(www.mywebsite.com)。因此,我必须在列出的域中进行调整。