如何使用@ font-face加載Google網絡字體？

我想使用名爲Cormorant Garamond的Google字體，但似乎無法獲得@ font-face命令來執行我想要的操作。我跟着THES指令（https://coderwall.com/p/5vrdkg/google-fonts-using-fontface-in-your-css），我現在有一個聲明，在我的（多）CSS文件一個看起來像這樣：如何使用@ font-face加載Google網絡字體？

/* latin-ext */ 
@font-face { 
    font-family: 'Cormorant Garamond'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Cormorant Garamond Regular'), local('CormorantGaramond-Regular'), url(https://fonts.gstatic.com/s/cormorantgaramond/v3/EI2hhCO6kSfLAy-Dpd8fd8lWqVXdZDPPgQrkuJ8lbib3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
}

這是正確的頂部，就在「體」之前的聲明

再往我有這樣的：

.collection-editorial p { 
    font-family: 'Cormorant Garamond', Arial; 
    line-height: 110%; 
    text-align: left !important; 
}

當我加載頁面（使用Chrome）這顯然是顯示Arial字體。然而，使用檢查員，我發現控制檯沒有錯誤，並查看「計算」的css規則，我可以看到它應該顯然是Cormorant Garamond（即css規則似乎正確應用）。但顯然它不是正確的。我必須錯過一些訣竅，但是什麼？

來源

2017-03-04 Joel Guesclin

是否包含字體文件（S）？爲什麼不使用谷歌CDN，所以你不必定義自己的'@ font-face'屬性？ http://codepen.io/anon/pen/LWZjyy –

要將該字體嵌入到網頁中，請將此代碼複製到HTML文檔的<head>中。

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">

然後，使用下面的CSS規則來指定這個家庭：

font-family: 'Cormorant Garamond', serif;

來源

2017-03-04 18:36:39

如何使用@ font-face加載Google網絡字體？

回答

相關問題