@ font-face css添加自定義字體

我有一個wordpress主題，我想添加自定義字體。我在其中放置字體文件的主題文件中添加了一個「字體」文件夾。@ font-face css添加自定義字體

現在我的CSS是這樣的：

@font-face { 
font-family: Brandon; 
src: url('/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf'); 
font-weight: normal; 
} 
h1 { 
font-family: Brandon; 
}

然而，這似乎並沒有工作，我不明白爲什麼。

來源

2017-01-16 Joel

您是否嘗試過使用Web瀏覽器開發工具查看控制檯？如果找不到或加載字體，這會給你一個錯誤。可能是一個開始的好地方。 – mikey242

'src：url（'/ domains/test.innerwhy.com/html/...' - 看起來很像文件系統路徑（基於文件夾名稱），而它應該是一個（相對）URL。不知道有什麼區別，那麼這是你應該首先閱讀的第一件事 – CBroe

通過查看我只能建議您檢查從css文件路徑是否正確。在字體加載失敗的情況下設置回落也是很好的。您可能也會錯過設備支持的字體文件類型。

來源

2017-01-16 13:36:54 Sparkz

它不工作，因爲src路徑是錯誤的。「/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf」

您可以在本地下載的字體文件，並使用這樣的：

@font-face { 
font-family: 'Montserrat-Regular'; 
src: url('../fonts/montserrat-regular-webfont.eot'); 
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/montserrat-regular-webfont.woff2') format('woff2'), 
    url('../fonts/montserrat-regular-webfont.woff') format('woff'), 
    url('../fonts/montserrat-regular-webfont.ttf') format('truetype');

}

來源

2017-01-16 13:54:55

當我嘗試這個開發工具的控制檯說：無法加載資源：服務器響應狀態404（不找到） – Joel

你可以從這個鏈接下載，然後在線生成網頁字體。https://github.com/piamancini/landing/tree/master/fonts –

@ font-face css添加自定義字體

回答

相關問題