WordPress 自訂字型 | WordPress.com 支援團隊

網站中的文字字元樣式稱為字型。本指引會說明如何為網站選擇字型。

在此指南中

1. 字型與方案資格
2. 變更你的字型
3. 將字型套用到特定文字
4. 上傳自訂字型
5. 無樣式文字閃爍
6. Google Fonts 和 GDPR

字型與方案資格

使用進階版、商用版和電子商務版方案的網站，可以從網站的大量字型選項中選擇，但無法上傳自己的自訂字型。

若要上傳自訂字型，並從 Google Fonts 安裝字型樣式，請升級至商用版或電子商務方案。

變更你的字型

你可以透過下列步驟變更網站的字型。

若要判斷應遵循本指引的哪一節內容，請前往儀表板查看左側的「外觀」區段。如果在此看到「編輯器」，請參閱本指引的「網站編輯器」一節。或者請參閱「頁面編輯器」或「自訂工具」操作說明。

Site EditorPage EditorCustomizer

如果網站使用的是支援網站編輯器的佈景主題，你就可以透過「樣式」選項來變更網站的字型。若要變更網站的字型，請按以下步驟操作：

1. 前往 WordPress.com 儀表板。
2. 前往「外觀」→「編輯器」。
3. 按一下左側的「樣式」，或選取看起來像黑白圓圈的「樣式」圖示。
4. 選取「文字設計」選項。
5. 從下列的網站文字元素中選擇：
   • 文字
   • 連結
   • 標題
   • 說明文字
   • 按鈕
6. 按一下「字型」底下的下拉式選單，然後選擇所需的字型。文字會更新至你選擇的字型，供你查看字型外觀。
7. 按一下「儲存」按鈕。

下方影片會示範這些步驟：

「樣式」圖示

在網站編輯器中變更字型

參閱我們的樣式指引，深入了解調整網站文字外觀的所有功能。

少數佈景主題 (完整清單) 的字型設定，是位於頁面編輯器內。請依照以下步驟變更網站的字型：

1. 前往 WordPress.com 儀表板。
2. 前往「頁面」，然後按一下任何頁面即可編輯。
3. 按一下「全域樣式」圖示 (圖示的大寫「A」後面接續小寫「a」)。
4. 按一下「標題字型」或「基本字型」下方的下拉式選單，查看可用的字型選項：
   • 網站上所有的標題都使用標題字型，包含文章和頁面標題、小工具標題、留言標頭，以及文章和頁面內的標題等。
   • 基本字型用於本文文字和網站選單。
5. 選擇想要的字型。文字會更新至你選擇的字型，供你查看字型外觀。
   • 如果你不確定要選擇哪種字型，下拉式選單下方會顯示一些建議的配對。
6. 按一下「發佈」或「更新」即可儲存你的選擇，或按一下「重設」以還原變更。

你可在傳統 WordPress 佈景主題中，於「自訂工具」找到字型設定。你可以依據以下步驟變更網站字型：

1. 前往「儀表板」。
2. 前往「外觀」→「自訂」。
3. 按一下「字型」選項。
4. 按一下「標題字型」或「基本字型」下的下拉式選單，查看可用的字型選項：
   • 網站上所有的標題都使用標題，包含文章和頁面標題、小工具標題、留言標頭，以及文章和頁面內的標題等。
   • 基本字型用於本文文字和網站選單。
5. 選擇想要的字型。文字會更新至你選擇的字型，供你查看字型外觀。
6. 按一下「儲存變更」，即可將選擇的新字型發佈至你的網站。

視你選擇的字型而定，也有可能會看到其他選項：

• 字型樣式：若要調整標題字型的樣式，請在字型左下側的選項按一下。可用的樣式會依選擇的字型有所不同。
• 字型大小：若要調整標題字型或基本字型的大小，請在每個選取的字型右下側按一下大小選項，然後從下拉式選單選取大小。

你可以按一下字型名稱右側的 X，改回佈景主題的預設字型。

按一下自訂字型旁邊的 X，即可將字型還原成佈景主題的預設值。

將字型套用到特定文字

選擇字型時，你會看到設定整體網站字型的選項，而不是設定個別頁面或某行文字的字型。從設計層面來說，這樣的做法最為合適。整個網站使用的字型一致時，看起來最為美觀。如果網站使用各種不同字型，看起來可能會不協調。

如果你想突顯某段文字，請考慮使用其他方法。例如套用不同顏色、使用標題或引文區塊，或是插入圖片。

上傳自訂字型

本節指引適用於使用 WordPress.com 商用版和電子商務版方案，以及舊版專業版方案的網站。如果你有商用版方案，請務必啟用該方案。若是採用免費、個人版和進階版方案的網站，只要升級方案，即可存取此功能。

你會為網站找到大量的字型樣式選擇。如果你想要有更多字型以供選擇，可以直接透過網站編輯器來安裝或上傳自訂字型。

我們的指引會說明如何安裝、上傳和管理自訂字型。

無樣式文字閃爍

無樣式文字閃爍 (FOUT) 指的是在所選字型出現前，其他字型短暫閃現的狀態。連結速度較慢時，文字會先以佈景主題的預設字型顯示。這樣可讓讀者在選擇的字型載入前先閱讀內容，而不是看著空白頁面發呆。在頁面載入完成前，文字會稍微閃爍變成不同字型；總體而言對連結速度較慢的讀者來說，不會看到空白畫面。

如果不希望這樣，可以在「外觀」→「自訂」→「其他 CSS」中使用 CSS 編輯器，將此 CSS 程式碼加入符合資格方案的網站：

.wf-loading body{ visibility: hidden; }

或

html:not(.wf-active) body{ display: none; }

Google Fonts 和 GDPR

針對提供WordPress.com 佈景主題中所用 Google Fonts 的所有要求，一律會透過 WordPress.com 的伺服器提供，不再使用 Google 的 CDN/FDN。此變更於 2022 年 12 月施行。

如果網站使用自訂外掛程式或第三方佈景主題，請向該外掛程式和/或佈景主題開發人員確認，以便確保對方並未透過 Google 的 CDN/FDN 提供 Google Fonts。你可以在此深入了解 GDPR。