如何更改 WordPress 主題中的字體(5 種簡單方法)

WPressize Me

08/29/2023

為什麼要在您的 WordPress 網站上更改字體?

字體是網站設計的重要組成部分,對 WordPress 網站的外觀和感覺有著巨大影響。如果網站上的字體難以閱讀,則很難留住訪客,他們最終會放棄網站。

字體還表現出品牌的身份。例如,您可以使用特定的字體來使網站看起來更加專業或休閒。

WordPress 主題預設了網站的字體、字體大小和字體顏色。然而,您可能希望將預設字體更改為其他字體。幸運的是,有幾種方法可以在 WordPress 中更改字體。我們將向您展示幾種不同的方法,您可以點擊以下鏈接跳到任意部分:

在 WordPress 主題自訂器中更改字體

更改網站字體的一個簡單方法是進入 WordPress 主題自訂器。它允許您更改網站的外觀並顯示實時預覽。

注意:如果缺少自訂器選單選項,那麼您的主題可能啟用了完整站點編輯,您需要使用其他方法或切換主題。

在本教程中,我們將使用 Astra 主題。不過,請記住,選項可能會根據您的 WordPress 主題而有所不同。一般來說,您應該在自訂器中查找屬於主題的“字體”或“排版設置”。

首先,可以從 WordPress 儀表板導航到“外觀」»「自訂”。

這將啟動 WordPress 主題自訂器。Astra 主題有一個“全球”部分,可以更改整個網站的風格。要更改整個網站的字體,您可以點擊左側選單中的“全球”選項。

在下一屏中,您將看到“排版”、“顏色”、“容器”、“按鈕”等選項。請點擊“排版”選項。

在這裡,您可以在“預設”部分選擇不同的字體。

這些是主題提供的預設字體組合,選擇一個預設將更改整個網站的字體。您可以將鼠標懸停在字體預設上以查看字體組合。例如,我們可以在這些預設之一中看到“Montserrat 和 Source Sans Pro”的組合。

此外,您還可以為主題中的單個元素更改字體。例如,您可以為正文和標題使用不同的字體。甚至可以為每個標題級別使用單獨的字體。

首先,從“字體系列”下拉選單中為任何單個元素選擇字體。

此外,還有更多選項可以更改字體大小、字重、選擇變體等。

完成後,不要忘記點擊“發布”或“更新”按鈕。

現在,您可以拜訪您的網站並查看新字體。例如,我們在演示網站中將正文字體更改為 Roboto,標題字體更改為 Helvetica。

請注意,不是所有 WordPress 主題都能提供與 Astra 相同的功能和自訂選項。如果您的主題不提供這些功能,那麼請繼續閱讀下一種方法。

在 WordPress 全站編輯器中更改字體

如果您使用基於塊的 WordPress 主題,例如 Twenty Twenty-Two,那麼您可以使用全站編輯器(FSE)更改網站的字體。

全站編輯器允許您使用塊來自訂 WordPress 主題,就像使用 WordPress 內容編輯器編輯文章或頁面一樣。不過,FSE 目前處於測試階段,只有少數主題支持它。

在本教程中,我們將使用 Twenty Twenty-Two 主題。

首先,可以從 WordPress 管理面板導航到“外觀”»“編輯”。

這將打開 WordPress 主題的全站編輯器。

接下來,您可以點擊右上角的“風格”圖標,然後點擊“排版”選項。

之後,您可以選擇文字和鏈接等元素來更改它們的排版。

我們將選擇“文本”作為元素,然後在“字體”下拉選單中更改其字體。

完成後,只需點擊“保存”按鈕。

您已成功使用全站編輯器更改了字體。您還可以向 WordPress 網站添加自定義字體,然後在全站編輯器中更改它們。

使用 WordPress 插件更改字體

另一種更改 WordPress 字體的方法是使用像 Fonts Plugin 這樣的 WordPress 插件。

這是一款 WordPress 排版插件,允許您在網站中添加數千種 Google 字體和不同的字體變體。

首先,您需要安裝並啟動 Fonts Plugin。若需幫助,請參閱我們的《如何安裝 WordPress 插件》指南。

啟動後,您將在 WordPress 儀表板中看到 Fonts Plugin 快速入門指南。您可以輸入電子郵件地址以獲取 PDF 或導航到“自訂字體”來開始編輯。

這將在主題的自訂器中打開插件的自訂選項。

在此頁面,請點擊“基本設置”選單。

進入該選單項後,您可以開始自訂內容、標題和按鈕排版。

只需展開每個文本元素的下拉選單並選擇您偏好的字體。

完成後,請不要忘記點擊“發布”按鈕,Fonts Plugin 將更新更改。

使用 WordPress 主題構建器更改字體

有許多強大的 WordPress 主題構建器讓您可以在不編輯代碼的情況下創建自定義主題。您可以使用它們來更改網站上不同元素的字體。

在本教程中,我們將使用 SeedProd。這是 WordPress 最佳的登陸頁和主題構建器插件,提供拖放構建器以創建自定義主題,而無需觸及任何代碼。

請注意,您需要 SeedProd 專業版,因為它包括主題構建器。也有 SeedProd 精簡版可免費使用。

首先,您需要安裝並激活 SeedProd 插件。有關詳細信息,請參閱我們的《如何安裝 WordPress 插件》指南。

啟動後,您將看到 SeedProd 歡迎屏幕。請輸入您的許可證密鑰並點擊“驗證密鑰”按鈕。您可以在 SeedProd 帳戶區輕鬆找到許可證密鑰。

之後,您可以從 WordPress 儀表板導航到“SeedProd」»「主題構建器”。

然後,請點擊頂部的“主題”按鈕。

在這裡,插件將顯示多個可選主題。

只需將鼠標懸停在您想使用的主題上,然後點擊它。我們將使用“起始”主題進行本教程。

SeedProd 現在將生成不同的主題模板。

您可以編輯每個模板並自訂您的 WordPress 主題。還有選項可以手動添加主題模板。

讓我們編輯首頁主題模板並更改不同元素的字體。首先,可以點擊“首頁”下的“編輯設計”鏈接。

這將啟動 SeedProd 的拖放主題構建器。您可以從左側的選單中添加新元素並將它們放置到模板中的任意位置。

要更改任何主題部分的字體,只需選擇它。例如,我們將選擇“起始”標題下的文本框。

接下來,您需要從左側選單中前往“高級”標籤,然後點擊“排版”前的“編輯”按鈕。

之後,您將看到多個選項可以編輯所選部分的排版。

可以點擊“字體系列”下拉選單,為文本選擇字體。還有選項可以選擇字重、調整字體大小、行高、字母間距、對齊方式、字母大小寫等。

現在,您可以重複此步驟並更改主題上其他元素的字體。

完成後,只需點擊頂部的“保存”按鈕。

要應用自訂主題和字體,請導航到“SeedProd」»「主題構建器”,並將“啟用 SeedProd 主題”選項旁邊的開關切換到“是”。

如果您希望從頭開始創建 WordPress 主題,請參閱我們的《如何輕鬆創建自定義 WordPress 主題》指南。

在 WordPress 內容編輯器中自訂字體外觀

您還可以使用內容編輯器更改特定文章和頁面中字體的外觀。

此方法的缺點是它僅適用於該文章或頁面的新字體。換句話說,您需要對希望應用類似自訂的所有其他文章重複此步驟。

雖然此方法對文章特定的自訂非常方便,但如果您希望使用網站範圍的字體更改選項,應考慮其他選項。

要使用 WordPress 內容編輯器更改字體,只需編輯文章或添加新文章。進入 WordPress 內容編輯器後,您可以選擇文本並更改其外觀。

在右側的設置面板中,您需要前往“排版”部分。然後,點擊“排版”前的 3 個點,並從下拉選單中選擇“外觀”。

完成此步驟後,“外觀”設置將顯示。點擊下拉選單,為您的字體選擇一個樣式。例如,您可以將字體設置為粗體、細體、斜體、黑體、粗斜體、特粗體等。

在此設置區,您還可以更改字體大小、選擇字母大小寫、編輯顏色、啟用首字下沉等。

完成年後,不要忘記更新或發布您的頁面。

專家提示

想對網站進行全面和專業的更改嗎?我們的團隊專門創建帶有精美排版的驚人網站,將使您的品牌熠熠生輝。了解我們的 WPBeginner 設計服務可以為您做些什麼!

希望本文能幫助您了解如何在 WordPress 中更改字體。接下來,您可能還想查看我們的《如何輕鬆向 WordPress 主題添加圖標字體》和《如何更改 WordPress 中的預設文本選擇顏色》的指南。

如果您喜歡本文,請訂閱我們的 YouTube 頻道,獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>