Question

我在标题中加载自定义字体：

<link rel="stylesheet" href="//example.com/stylesheets/custom-font.css"/>

在这个样式表中我有一块CSS：

@font-face {
    font-family: 'soneregular';
    src: url('//example.com/fonts/webfont.eot');
    src: url('//example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('//example.com/fonts/webfont.woff2') format('woff2'),
         url('//example.com/fonts/webfont.woff') format('woff'),
         url('//example.com/fonts/webfont.ttf') format('truetype'),
         url('//example.com/fonts/webfont.svg#soneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

当我通过HTTP加载页面时，自定义字体加载正常，但是当页面通过HTTPS加载时，将恢复为后备字体（sans-serif）并在控制台中显示这些错误：

Mixed Content: The page at 'https://example.com/ecom/myAccount/myAccount.do?forward=/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/webfont.woff2'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://example.com/ecom/myAccount/myAccount.do?forward=/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/webfont.woff'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://example.com/ecom/myAccount/myAccount.do?forward=/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/webfont.ttf'. This request has been blocked; the content must be served over HTTPS.

如何通过HTTP和HTTPS正确加载这些自定义字体，我需要做什么？

Answer 1

尝试取消设置此文件类型的vary标头。如果你也使用其他文件类型，那么也为它们做同样的事情。

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

通过HTTP和HTTPS加载自定义字体

1 个答案: