我一直無法在我的網站服務器上自助加載web字體，關于這個主題的其他堆棧溢出文章也沒有幫助我找到這里的錯誤。

我在字體應該出現的地方留了一個空白。

以下是詳細情況:

https://www . foo . com/public _ html/WP-content/themes/independent-publisher/fonts/font awesome-free-5-0-6/we b-fonts-with-CSS/ 是我的字體的CSS文件的位置，fontawesome-all.css

https://www . foo . com/public _ html/WP-content/themes/independent-publisher/fonts/font awesome-free-5-0-6/we b-fonts-with-CSS/web fonts 是我的字體的位置

首先，確信我沒有在標題的樣式表鏈接中犯下與路徑相關的錯誤。

我已經嘗試用多種方式在我的HTML標題中引用字體的CSS樣式表:

作為相對鏈接:

<link href="./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

作為絕對鏈接:

<link  rel="stylesheet">

其次，確信我的@font-face實現和指向的路徑是正確的。 在字體的樣式表fontawesome-all.css中是字體的@font-face調用:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

編輯:我在頁面上使用的字體(圖標)是標準的:例如& ltI class = " Fas fa-external-link-alt " >& lt/I & gt；以及偽元素實例:

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

編輯2:使用字體的CSS文件的官方外部來源，& ltlink href = " https://www . ashenglowgaming . com/public _ html/WP-content/themes/independent-publisher/fonts/font awesome-free-5-0-6/we B- fonts-with-CSS/font awesome-all . CSS " rel = " style sheet " & gt；對于字體的內聯實例，就像我上面給出的例子一樣& ltI class = " Fas fa-external-link-alt " >& lt/I & gt；，但不適用于偽元素實例

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

無論如何，我想在我自己的服務器上提供文件，所以對我來說鏈接離站是不夠的。

最后，供您參考:查看官方字體Awesome安裝指南在這里

我認為這可能是問題所在:

url("../webfonts/font-here.ext");

在fontawesome-all.css樣式表中，您要求瀏覽器在當前目錄的上一個目錄中查找字體文件，這是不準確的，因為字體文件似乎位于樣式表所在目錄的同一文件夾中。

這應該可行:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("webfonts/fa-brands-400.eot");
  src: url("webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-brands-400.woff2") format("woff2"), url("webfonts/fa-brands-400.woff") format("woff"), url("webfonts/fa-brands-400.ttf") format("truetype"), url("webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("webfonts/fa-regular-400.eot");
  src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("webfonts/fa-solid-900.eot");
  src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

更新

這就是問題所在:

<link  rel="stylesheet">

應該是:

<link  rel="stylesheet">

所以看起來你實際上有兩個問題:錯誤的字體文件路徑和錯誤的樣式表路徑。

順便說一下，我建議使用wp_enqueue_style和wp_enqueue_script將樣式表和JS文件附加到主題的head部分:

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );