谷歌字体在谷歌浏览器中无法使用

Question

这里是链接

如果您点击黑色区域内的方块，它们将更改左侧单词的字体。所有字体都是Google字体，但在Google Chrome中均无法使用。我已经在互联网上搜索了很久，但没有找到解决方法。在其他浏览器中，一切正常。

- Michael Rader

---

Google Chrome在加载自己的字体方面存在最多的问题。这太荒谬了。 - Michael Rader

Answer 1

您收到了一个能够解释一些内容的错误信息。尝试按下F12，然后点击Console选项卡，您将看到这个错误信息。

[blocked] 此页面https://branard.com/index.php?option=com_brands&view=detail&id=16&Itemid=102从http://fonts.googleapis.com/css?family=Erica+One|Monda|Sacramento|Oleo+Script+Swash+Caps|Text+Me+One|Seymour+One|Cagliostro|Qwigley加载不安全资源。

当主页使用HTTPS协议时，如果通过HTTP获取不安全资源，Chrome会显示此消息。

只需将字体URL从http://fonts.googleapis.com/css更改为https://fonts.googleapis.com/css，以确保该链接安全即可。

- dwarring

---

从URL中省略http:部分会更安全，这样可以将协议默认为页面本身的协议。 - Jukka K. Korpela

谢谢。我必须为我的开发人员提出这个问题。 - Michael Rader

一个臭字符能够毁掉你的代码，真是令人惊讶。+1，谢谢。它起作用了。 - Daniel Node.js

Answer 2

这是浏览器的安全功能，它会阻止通过 https 提供的主机页面中包含的 http 内容。修复方法很简单：只需从所有资源 URL（脚本、样式表等）中删除协议即可。在您的情况下，字体 CSS 的 URL 变为：

//fonts.googleapis.com/css…

请注意，URL中没有http或https。

- Chris Calo

---

希望人们在踩低评分时能有点常识并留下评论。看起来这对我来说是一个合法的解决方案，尽管要注意陷阱。 - contrebis