WordPress-通過Font-face添加自定義字體

Question

我已經建立了一個前端站點，現在使用html5blank主題將該站點上傳到wordpress。 我以前從未上傳過自定義字體文件，但我認為文件路徑錯誤。 字體文件位於我的子主題文件夾的fonts文件夾中。 這就是我的代碼-

style.css

@font-face {
    font-family: 'Gotham-Light';
    src: url('/fonts/Gotham-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

我也將其放在header.php （不確定是否需要）-

 <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/fonts/Gotham-Light.otf" />

如果這就是問題所在，如何顯示正確的路徑？ 它可以是相對的還是絕對的？

Answer 1

您在@ font-face中使用絕對路徑：

src: url('/fonts/Gotham-Light.otf') format('opentype');

開頭的/表示它在webroot中尋找字體。

假設您的style.css位於子主題文件夾中，而fonts是其子文件夾，請嘗試以下操作（即，開始時不帶/ ）：

src: url('fonts/Gotham-Light.otf') format('opentype');

Answer 2

您需要字體文件的地址而不是樣式表。

 <link rel="stylesheet" href="<?php echo get_template_directory_uri('/fonts/Gotham-Light.otf') ?>/fonts/Gotham-Light.otf" />

Answer 3

只要將字體放在主題目錄中名為fonts的文件夾中，該方法就可以工作。

@font-face {
font-family: 'gothamlight';  
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Gotham-Light.otf);  
font-weight: normal;
font-style: normal;

}