自定義字體不加載

我想上傳Gotham字體到我正在建設的網站，但它不工作。我在這裏和通過谷歌搜索，不能看到什麼問題是一個語法上傳問題，我不能發現希望另一雙眼睛可以。自定義字體不加載

我已經加載自定義字體之前在軌道應用程序，但從來沒有一個純粹的前端網站，所以不知道是否有什麼明顯的，我省略。我已經設置了一個字體文件 - Gotham_fonts - 並且在那裏有六個文件，所有文件都是.otf擴展名。

的style.css

@font-face { 
    font-family: 'Gotham-Book'; 
    src: url('Gotham_fonts/Gotham-Book.otf') format('otf'); 
} 

body { 
    font-family: 'Gotham-Book', arial, sans-serif; 
}

我已經嘗試了幾種不同的變化，並與!important但沒有嘗試過。我的字體文件夾應該在我的CSS文件夾中嗎？

來源

2017-09-26 Mike.Whitehead

問題是，你使用格式字符串'「otf」'它應該''opentype「'。 –

@AlbertoMartinez我也嘗試過'opentype'，這一直沒有奏效。 –

首先：使用https://www.fontsquirrel.com/tools/webfont-generator來生成字體的OTF，TTF，EOT和WOFF版本，因爲在某些瀏覽器中使用/首選這四種版本，所以您可以將它們全部添加。

其次：你的CSS（你的HTML是罰款），那麼應該找一個類似於：

@font-face { 
    font-family: "Gotham-Book"; 
    src: url("../Gotham_fonts/Gotham-Book.eot"); 
    src: 
    url("../Gotham_fonts/Gotham-Book.woff") format("woff"), 
    url("../Gotham_fonts/Gotham-Book.otf") format("opentype"); 
}

的../是假設你的CSS文件夾和「Gotham_Fonts」文件夾是在同一個父目錄。

讓我知道這是否有幫助！

來源

2017-09-26 11:31:00

顯然，所有的Gotham字體都被髮電機列入黑名單... –

在字體松鼠頁面，他們有一個檢查*「是的，我上傳的字體合法有資格進行網頁嵌入」*和*「Font Squirrel offers這項服務真誠。「*。所有字體都有許可證說明可以對它們做什麼（如軟件），您不能只使用計算機中的任何字體並將其轉換爲其他格式，或者如果字體許可證不允許的話，在網絡上使用它更爲相關（如果字體許可證不允許的話，也可以，但在法律上與使用盜版軟件差不多） –

@AlbertoMartinez好吧，我明白了。一個已經寄給我的客戶，我真誠地以爲他們是通過完整的字體許可獲得的 –

你的代碼大多是美好的，但你用了不正確的格式字符串：

@font-face { 
    font-family: 'Gotham-Book'; 
    src: url('/Gotham_fonts/Gotham-Book.otf') format('opentype'); 
}

而且是使用正確的路徑字體文件很重要，有幾個選項：

您可以使用根目錄中的絕對路徑url('/Gotham_fonts/Gotham-Book.otf')，這是首選方式，因爲無論引用字體文件的位置如何，它都可以工作。唯一的缺點是，如果你有一個測試環境，每個項目都是一個文件夾，它只能在生產環境中工作。
您可以使用相對路徑，但在這種情況下，你需要把它相對於CSS文件，例如，如果CSS文件就可以使用url('Gotham_fonts/Gotham-Book.otf')因爲你有Gotham_fonts父文件夾，但如果它位於例如在CSS_files文件夾中，您必須使用url('../Gotham_fonts/Gotham-Book.otf')。

來源

2017-09-26 13:23:02

出於測試目的，我下載了來自ehem的Gotham Book，這是我在Google中找到的一個網站（第一頁結果），並且在將格式更改爲「opentype」後與代碼一起工作，所以我幾乎可以肯定你也有路徑問題。希望你的客戶沒有以同樣的方式得到字體... –

這可能是一個引導問題？此外，字體文件夾不是我的CSS文件夾，它應該是？ –

在什麼文件夾中，你有相對於路徑的不同文件？例如'Gotham_fonts'是'/ Gotham_fonts'（即'http：// example.com/Gotham_fonts'）。和CSS/HTML？ –

不知道這是否是我使用（我懷疑它可能已經）的文件，所以我嘗試了不同的字體家族集合，終於像這樣的工作路徑 -

@font-face { 
    font-family: 'geomanistregular'; 
    src: url('../fonts/geomanist-regular-webfont.eot'); 
    src: url('../fonts/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/geomanist-regular-webfont.woff2') format('woff2'), 
     url('../fonts/geomanist-regular-webfont.woff') format('woff'), 
     url('../fonts/geomanist-regular-webfont.ttf') format('truetype'), 
     url('../fonts/geomanist-regular-webfont.svg#geomanistregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}

確實是一個不錯的字體。感謝所有那些誰幫助:)

來源

2017-09-26 13:48:28

自定義字體不加載

回答

相關問題