谷歌网络字体和SSL错误

Question

我的网站使用Google webfonts很顺利，直到用户进入SSL部分的网站时出现问题。

此时，Chrome会抛出部分编码错误，我的Cufon菜单也会失去字距调整。

我正在使用以下CSS包含我的Webfont：

@font-face {
src: local('Lusitana'), url(https://themes.googleusercontent.com/static/fonts/lusitana
/v1/tAIvAkRzqMJf8Y4fM1R7PXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}

我的JavaScript控制台显示以下错误：

[blocked] 页面 https://domain.com/ecommerce.php 阻止从http://fonts.googleapis.com/css?family=Lusitana:regular,700&subset=latin 载入不安全的内容。

有什么办法可以让Google字体强制使用SSL吗？

- drooling_slowly

---

我也遇到了这个问题。我已经尝试使用link href="//fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css"和link href="https://fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css"进行测试，但问题仍然存在。 - Sebastian Sastre

Answer 1

你尝试过将url中的https://替换为//吗？请求应该会自动使用正确的协议。

- mattlondon

---

简单而有效。很棒的答案，值得采纳。 - Chris

似乎在HTTP上加载字体不再受支持，即使整个网站仅限于HTTP，我只能在Chrome上通过HTTPS获取字体加载。 - LB--

还要检查服务器是否可能返回任何缓存无效的头信息；Internet Explorer 无法很好地处理它，不会显示字体：请参见此处 - user1767316

Answer 2

请在您的HTML页面（或模板）上找到此行：

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

将其更改为：

 <link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

这个简单的改变将使你的浏览器以适用模式（HTTP vs HTTPS）调用Google字体页面。

享受吧！

- MSalmanSabir

---

我无法在Chrome v49（非https本地页面）中使用//。但是，https可以正常工作。Google建议在所有这些调用中使用https，并且出于几个原因，最好坚持使用https。 - Ross

这些说法有任何引用资料吗？ - TonyG

Answer 3

为了加载适用于非安全和SSL模式的Google字体，请在页面头部尝试以下方法（并删除调用CSS内的https://）：

<script type="text/javascript">
  WebFontConfig = { google: { families: [ 'Droid+Serif::latin' ] } };
  (function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

在我的示例中，我使用的是Droid Serif字体，所以请使用您自己的字体进行替换。

您可以在这里了解更多信息。

- willdanceforfun

---

请参考@londonium下面的答案，这是一个更简单有效的解决方案。 - Chris

Answer 4

我也曾因WordPress主题而出现此错误。它导致页面加载缓慢，并在开发控制台中报告以下错误：

混合内容：页面“https://xxxxxxx.co.uk/”通过HTTPS加载，但请求不安全的样式表“http://fonts.googleapis.com/css? family=Droid+Serif%3A400%2C700%2C400italic%2C700italic&ver=5.4.1”。该请求已被阻止；内容必须通过HTTPS提供。

罪魁祸首是名为“Fresh and Clean”的WordPress主题。它继承了2014年编写的代码，其中包含“pre-SSL”编码实践。

要解决问题，只需在主题中更改以下文件即可：

/wp-content/themes/wpex-freshandclean/functions/scripts.php

查找所有出现的 http:// 并将每个更改为 https://

- Marc B