下面介紹的@font CSS是網站添加自定義字體的最常見方法。

第1步：下載字體

找到要在網站上使用的自定義字體，然后下載 TrueType 字體文件格式 （.ttf）。您也可以下載 OpenType 字體格式 （.otf）

第2步：創建用于交叉瀏覽的 Web 字體工具包

將您的.ttf或.otf文件上傳到網頁字體生成器，然后下載您的網頁字體工具包。

第3步：將字體文件上傳到您的網站

使用您的 FTP 或文件管理器，將 Web 字體工具包中找到的所有字體文件上傳到您的網站。 通常，此工具包將包括多個文件擴展名，例如 （.eot）、（.woff）、（.woff2）、（.ttf） 和 （.svg）。

您的工具包還將包括一個級聯樣式表 （.css），您需要在步驟 4 中更新和上傳該樣式表。

*此步驟將根據您網站的構建和托管方式而有很大差異。

第4步：更新并上傳您的 CSS 文件

在文本編輯器（如文本編輯、記事本或 Sublime）中打開 CSS 文件。

將現有源 URL 替換為通過上傳每個文件創建的新 URL。

默認情況下，源 URL 位置在下載的 Web 字體工具包中設置。它需要替換為服務器上的位置。

下面是一個快速示例：

更新前：

@font面 {

字體系列： “自定義字體”;

src： url（“CustomFont.eot”）;

src： url（“CustomFont.woff”） format（“woff”），url（“CustomFont.otf”） format（“opentype”），

url（“CustomFont.svg#filename”） format（“svg”）;

}

更新后：

@font面 {

字體系列： “自定義字體”;

src： url（“https://yoursite.com/css/fonts/CustomFont.eot”）;src： url（“https://yoursite.com/css/fonts/CustomFont.woff”） format（“woff”），url（“https://yoursite.com/css/fonts/CustomFont.otf”） format（“opentype”），

url（“https://yoursite.com/css/fonts/CustomFont.svg#filename”） format（“svg”）;

}

更新CSS文件后，您需要將其上傳到您的網站（服務器）。

第5步：在 CSS 聲明中使用自定義字體

現在，級聯樣式表和字體文件已上載到服務器，可以開始在 CSS 聲明中使用自定義字體來幫助改進 HTML 的外觀。

這可以通過多種方式完成，包括將站點范圍的聲明添加到主 CSS 文件。

下面是一個快速示例：

h1 {

font-family： 'CustomFont'， Arial， sans-serif;

字體粗細：正常;

字體樣式：正常;

}