如何在 WordPress 網站中添加自定義字體 [2022]

已發表: 2022-05-05

你知道你的網頁設計的核心部分是什麼嗎? 自定義字體添加到 WordPress 網站是您可以採取的最終步驟,以使您的網站訪問者留在您的網站上並增強網站的可讀性。 您為網站選擇的字體代表您的品牌形象。 讓我們深入了解具有來龍去脈的自定義字體。

custom fonts

即使您可以在線找到免費字體,您也只能根據您的主題兼容性來使用它們。 這就是為什麼我們要解釋如何使用手動方式和 WordPress 插件在 WordPress 中添加自定義字體。

為什麼要使用自定義字體以及在哪裡可以找到它們?

如上所述,您會發現許多可以輕鬆下載字體的網站。 例如, Font Squirrel最多提供三種免費字體供您使用。 Google Fonts是另一個令人驚嘆的選項,您可以在其中找到 900 多種字體可供選擇。 除此之外, Edge Web Fonts還可以為您提供多種字體。 對於個人使用,您可以選擇Fonts.com1001 Free Fonts

DaFont是最古老的字體庫,擁有超過 60,000 種字體,您可以從中篩選所需的字體。 您需要下載選擇的字體並且不像谷歌字體集成。 一種類似的字體庫是UrbanFont ,它擁有大量的創意和利潤豐厚的字體。

custom fonts

Adobe Fonts或 Typekit對於所有網頁設計師來說是一個非常方便的字體庫,因為它有 1900 多種可用字體。 即使您訂閱了免費帳戶,它仍然提供 200 多種網絡字體。

如果你想按月租用字體並支付訂閱費,你可以去Fontstand 它提供大約 2000 種令人驚嘆的字體,並按月向您收費。 就像這個Type Network是另一個自託管字體庫一樣,您一次將獲得 400 多個字體系列並輕鬆探索。

如何為網站選擇最佳的自定義字體?

由於您已經知道為 WordPress 尋找理想的自定義字體的資源,您現在需要知道如何選擇最佳字體。 過濾掉隨機字體會使您的選擇過程冗長而笨拙。 相反,您可以在為 WordPress 網站選擇最佳自定義字體時嘗試以下步驟。 在本博客中,我們將探索 Google 字體以選擇最佳字體,並在過濾所有字體時查看最佳實踐。

custom fonts

您喜歡的候選字體- 在 Google 字體中,您可以輕鬆地在搜索框中搜索所需的字體並設置類別。 搜索結果將根據您的調整而改變。 您可以看到字母、數字和其他格式的字體。

檢查字體詳細信息 - 檢查字體詳細信息很重要,因為您一眼就能看到所有可用的樣式和字體大小。 使用 Google 字體您會發現一個驚人的好處是它顯示了與該字體的流行配對。

custom fonts

在檢查字體詳細信息時,還要注意字體格式。 因為並非所有字體都支持所有瀏覽器系統。 這是最新的瀏覽器列表和支持的字體格式列表。

custom fonts

來源 - https://www.w3schools.com/Css/css3_fonts.asp

豐富您的字體收藏- 過濾完正確的字體後,您只需單擊“選擇此字體”按鈕即可將這些字體添加到您的收藏中。

向 WordPress 網站添加自定義字體的簡單方法

我們收集了一些以逐步格式向您的網站添加自定義字體的最簡單方法。 讓我們深入了解如何做到這一點。

如何在 WordPress 中手動添加自定義字體

手動添加自定義字體是不讓您的網站變慢的最明智的方法。 由於您已經探索了一些字體大小以找到所需的字體,因此請先下載字體。 現在您需要將字體上傳到您的網站託管帳戶。 查看您為 WordPress 網站使用的主題。 將字體的 CSS 文件上傳到您的帳戶。 下載字體時,請記住從 .zip 文件中提取文件。

要上傳您的字體文件,請轉到 wp-content/themes/your-theme/fonts 目錄。 為方便起見,您可以創建一個單獨的字體文件夾。 使用文件管理器將文件上傳到 hPanel。 現在導航到您的 WordPress 帳戶,然後單擊外觀選項。 選擇主題編輯器,您將在其中看到 style.css 文件。 在代碼底部添加以下代碼。

@字體臉{

字體系列:Aguafina Script-Regular;

src:網址 http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

字體粗細:正常;

}

現在單擊“更新文件”按鈕以保存更改。 請記住,每次訪問者訪問您的網站時,字體代碼都會加載字體。 然而,該字體尚未應用於任何元素。 您必須更改完全相同的 style.css 文件才能將字體分配給特定元素。 例如,下面的代碼將使我們網站的標題使用字體腳本。

.site-title {

字體系列: “Aguafina Script-Regular” ,Arial,無襯線;

}

如何使用 WordPress 插件設置自定義字體

對於所有 WordPress 用戶,使用字體插件是設置自定義字體的最簡單方法。 在這裡,我們展示了一些最簡單和最有用的字體插件,用於在 WordPress 網站上添加自定義字體。

WP 谷歌字體

custom fonts

您可以使用自定義字體並使用WP Google Fonts插件將它們應用於某些 CSS 元素。 從 WordPress 插件目錄安裝 WP Google Fonts 插件並使用您的 WordPress 儀表板訪問 Google 字體控制面板。 您可以選擇字體並調整選項,例如字體樣式、分配的元素等。

字體插件

custom fonts

Fonts Plugin是 Easy Google Fonts 的免費增值替代品,其工作方式類似,可讓您將 Google Fonts 順利集成到您的頁面中,而無需更改主題。 它也適用於定制器,允許您在發布之前嘗試替代字體選項。 Fonts Plugin 還集成了 Adob​​e Fonts,這是一個額外的好處。 Fonts Plugin 還允許您在材料中使用 Adob​​e 的字體庫。

使用自定義字體創建吸引人的網站

文本的可讀性和優雅性會影響訪問者瀏覽您網站的程度。 現在,任何人都可以從大量字體中進行選擇以在其網站上使用。 這些天來,您沒有理由在您的網站上使用任何舊字體。 自定義您的 WordPress 排版現在完全由您控制。

如果您發現此博客引人入勝且有幫助,訂閱我們的博客以閱讀更多此類博客。 加入我們的社區以分享您的想法。