@ font-face在字體上返回404s

Question

我試圖爲我的網站設置自定義字體，但它在Firefox，Chrome或Edge/IE上都不起作用。 Firefox開發人員工具中的網絡部分表示未找到字體並列出了404，儘管這些網址應該是正確的。這是我的代碼：

 @font-face { 
     font-family: 'Raleway55'; 
     src: url('/wp-content/uploads/font-organizer/RalewayRegular.ttf') format('truetype'), 
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff') format('woff'), 
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    }
 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-Light.ttf') format('truetype'); 
font-weight: 300; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-LightItalic.ttf') format('truetype'); 
font-weight: 300; 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-Italic.ttf') format('truetype'); 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBold.ttf') format('truetype'); 
font-weight: 600; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBoldItalic.ttf') format('truetype'); 
font-weight: 600; 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-Bold.ttf') format('truetype'); 
font-weight: 700; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-BoldItalic.ttf') format('truetype'); 
font-weight: 700; 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBold.ttf') format('truetype'); 
font-weight: 800; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBoldItalic.ttf') format('truetype'); 
font-weight: 800; 
font-style: italic; 
} 

body { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h1 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h2 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h3 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h4 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h5 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h6 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
p { font-family: 'Raleway55'!important; font-weight:normal!important; } 
q { font-family: 'Raleway55'!important; font-weight:normal!important; } 
li { font-family: 'Raleway55'!important; font-weight:normal!important; } 
a { font-family: 'Raleway55'!important; font-weight:normal!important; } <code> 

你能幫忙嗎？謝謝！

Answer 1

所以我恐怕你的路徑實際上是不正確的。現在你的style.css指向你的web服務器根目錄下的一個wp-content目錄，我很確定你的Wordpress安裝目錄不存在。

因此，假如你有以下方式你的WordPress的文件設置（這裏只是基本的設置，顯然還有很多更多的文件）：

wp-admin 
wp-content 
    plugins 
    themes 
    my-theme 
     style.css 
    uploads 
    font-organizer 
     my-font.ttf 
wp-includes 

你會希望你的CSS看起來是這樣的：

@font-face { 
    font-family: 'MyFont'; 
    src: url('../../uploads/font-organizer/my-font.ttf') format('truetype'), 
font-weight: normal; 
} 

你在做什麼基本上有告訴瀏覽器兩個目錄從css文件的位置，這應該降落在你的wp-content目錄瀏覽起來，然後導航到uploads/etc.給散熱鰭片d字體。

---

現在的方式，我通常設置我的字體時，我做的WordPress網站只是將其投放到位於該wp-content文件夾名爲正式文件夾fonts。這樣，它們就不在上傳文件夾中，並且它使得客戶或您自己不太可能在Wordpress媒體管理器中意外刪除它們。所以我平時的文件結構是：

wp-admin 
wp-content 
    fonts 
    my-font.ttf 
    plugins 
    themes 
    my-theme 
     style.css 
    uploads 
wp-includes 

然後我的CSS會像這樣：

@font-face { 
    font-family: 'MyFont'; 
    src: url('../../fonts/my-font.ttf') format('truetype'), 
font-weight: normal; 
} 

無論如何，沒有必要做我的方式，但只是一些精神食糧。希望這有助於和網站祝你好運！