谷歌字體未在Chrome中顯示

Question

我有一個非常奇怪的問題。

我在我的網站上使用谷歌字體。 一切都在Firefox，Internet Explorer甚至Opera中正確顯示。

但在Google Chrome中，會顯示字體“Comic sans MS”。

在此屏幕截圖中，您可以看到firefox和chrome顯示相同的頁面。 該字體在firefox中工作（左）但在Chrome中（在右側）有問題http://gyazo.com/43462de300f4fb358cdf22c77e1955cd

你可以在這里看到這個頁面： https ： //www.no-gods-no-masters.com/A-12443978/t-shirt-liberation-animale-vegetarien-vegan-ALF-animal-liberation-front

請注意，我還在浮動導航欄（頂部）上使用另一種谷歌字體（Doppio One）。 這個在Chrome中運行

字體加載在這里：

    @font-face {
    font-family: 'goboldregular';
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot');
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.woff') format('woff'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.ttf') format('truetype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.svg#goboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 1

你的第一個問題是@ font-face你的font-family是'goboldregular'，你的h2標題你將font-family設置為'gobold', cursive （草書在MS Windows上制作后備字體漫畫sans）。 您在樣式中引用的字體系列名稱應與您在font-face聲明中設置的名稱相同。 因此，對於問題的第一部分，您應該更改標題標記上的內聯樣式以使用font-family: 'goboldregular', cursive 。

第二個問題是，當我進行上述詳細更改時，我得到以下控制台錯誤：

已禁止通過跨源資源共享策略加載源“ https://no-gods-no-masters.com ”的重定向：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此，不允許來源“ https://www.no-gods-no-masters.com ”。

這意味着您的字體沒有設置“Access-Control-Allow-Origin”。 這可以通過添加以下代碼片段來編輯.htaccess文件（如果您使用的是Apache服務器）或httpd.conf（如果您使用的是ngix）來修復：

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

Answer 2

Chrome檢查器會顯示此元素的內聯：

element.style {
  text-align: left;
  font-family: 'Gobold', cursive;
  text-shadow: 2px 2px 4px #AAA;
  font-size: 26px;
  padding-left: 5px;
  color: #000;
}

但是沒有加載該字體

<link href='https://fonts.googleapis.com/css?family=Aldrich|Doppio+One|Lemon|Candal' rel='stylesheet' type='text/css'>

你在那里看到的字體不是漫畫sans，它是瀏覽器的默認草書。

我無法在你的CSS中看到你在這個元素/類中有另一個字體加載，無論內聯樣式總是在級聯中的最后一個。 除非你在CSS中使用！important重寫它。

您應該在這里發布一些代碼，以便我們可以看到您正在使用的更多內容。

Answer 3

像TeoDragovic說：

您有跨域策略問題。 但我認為，您從非www域名no-gods-no-masters.com重定向到域www.no-gods-no-masters.com 。 這也適用於位於no-www域的字體文件。

只需將www添加到@font-face聲明即可

@font-face {
    font-family: 'goboldregular';
    src: url('https://www.no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot');
    src: url('https://www.no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.no-gods-no-masters.com/scripts/fonts/gobold-webfont.woff') format('woff'),
         url('https://www.no-gods-no-masters.com/scripts/fonts/gobold-webfont.ttf') format('truetype'),
         url('https://www.no-gods-no-masters.com/scripts/fonts/gobold-webfont.svg#goboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}