谷歌网络字体和 SSL 错误答案

【问题标题】：Google web fonts and SSL error谷歌网络字体和 SSL 错误
【发布时间】：2012-07-28 21:22:38
【问题描述】：

在用户点击网站的 SSL 部分之前，我的网站与 Google 网络字体配合良好。

此时，chrome 抛出 部分编码错误，我的 cufon 菜单失去了字距调整。

我在这个 css 中包含了我的 webfont：

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

我的 js 控制台然后给了我这个错误：

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

任何想法如何让谷歌字体强制 SSL？

【问题讨论】：

我也遇到了这个问题。我已经使用 link href="//fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css" 和 link href="fonts.googleapis.com/css?family=Gudea" rel="stylesheet" 类型进行了测试="text/css" 但问题是一样的

标签： ssl webfonts

【解决方案1】：

您是否尝试过将网址中的https:// 替换为//？请求应自动使用正确的协议。

【讨论】：

简单有效。很好的答案，值得被接受。
似乎不再支持通过 HTTP 加载字体，即使整个网站都是 HTTP，我也只能在 Chrome 中通过 HTTPS 加载字体。
还检查服务器是否可能返回任何缓存无效标头； IExplorer 处理不好，不会显示字体：see here

【解决方案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 与 HTTPS）调用 Google 字体页面。

享受吧！

【讨论】：

我无法在 chrome v49（非 https 本地页面）中使用 // .. https 工作但是。 Google 建议在所有这些调用中都使用 https，出于一些原因，最好坚持使用 https://
对这些声明有任何引用吗？

【解决方案3】：

要加载将在非安全和 SSL 模式下工作的谷歌字体，请在页面标题中尝试以下操作 - （并删除您在 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 字体，因此请与您的替换。

You can read more on this here.

【讨论】：

请参阅下面@londonium 的答案，以获得更简单且有效的解决方案。

【解决方案4】：

我也遇到了由 WordPress 中的主题引起的错误。导致页面加载缓慢，开发控制台报如下错误：

混合内容：“https://xxxxxxx.co.uk/”页面通过 HTTPS 加载，但请求的样式表不安全“http://fonts.googleapis.com/css? 家庭=机器人+衬线%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://

【讨论】：