需求說明：
在我們製作WordPress網站時，一定會需要設定字型（fonts）。在一般情況下，我們選擇的佈景主題（theme）和網頁編輯器（editor或page builder），會預設某一種字型，而且通常會是Google Fonts。Google Fonts的字型檔案存放在Google的字型網站上，當訪客讀取我們的網頁時，瀏覽器才會去Google網站抓取該字型來使用，以正確顯示字型。可以想見，使用Google Fonts或多或少會延長網頁的讀取時間，而如果我們在製作網頁時缺乏良好規劃，比如同一網頁中設定了多種Google Fonts字型，就會導致網頁的讀取時間更長，而這往往是不必要的。
更進一步地說，如果你希望你的網站（無論內容是中文或外文）能讓中國境內的網友可以順利瀏覽，那麼，不使用Google Fonts可能就變成必要的設定。因為目前為止，從中國境內無法正常開啟與瀏覽Google相關的網站（包括Google搜尋引擎、YouTube、Blogger、Gmail等），WordPress網站若設定為必須到Google網站抓取字型，可能會導致中國網友發現網頁讀取緩慢甚至完全打不開。
其實，要解決以上問題，方法有好幾個。例如我們可以把要使用的Google Fonts檔案，存一份在網站主機中，這樣一來瀏覽器就不必去Google網站抓取，這個稱為self-hosted google fonts。同理，我們也可以選擇非來自Google的網路字型，或許就不會有被擋的問題。如果你是對字型比較講究，也就是要求網頁一定得用某個特定字型來顯示，那就只能朝這類解決方案去執行。
另一方面，如果網站設計者對字型的選擇沒有那麼講究（只希望基本簡潔美觀），也希望盡量避免抓取字型拖慢網頁讀取的速度，那麼不妨考慮用系統字型組合（System Font Stacks）的設定。
什麼是System Font Stacks
先說明System Font，系統字型顧名思義指的是操作系統內定的字型，因為是內定，所以本來就存在於操作系統內（也就是訪客的電腦內、手機內），不需要去別的網站（如Google）抓取字型檔案，也不需要網頁設計者把字型檔案存一份在WordPress網站主機裡。
要注意的是，各家操作系統內定的系統字型不盡相同。舉一個簡單的例子，Windows系統的內定無襯邊英文字型常見的有Arial、Tahoma、Trebuchet MS、Verdana等，這幾種英文字型在Mac OS系統裡剛好也是基本字型，但是像Geneva、Helvetica這兩種字型則是Mac OS系統內定，但微軟基本上不支援的。
更需注意的則是中文字型。以無襯邊字型來說，例如微軟的繁體中文系統字型有微軟正黑體，Mac OS系統的中文系統字型則有蘋方體（PingFang TC）。
目前較普及的操作系統有Mac OS, Windows, Android, Ubuntu, Linux等，出於各家系統字型的差異，就有必要設定一組字型來兼顧各家操作系統的狀況。
系統字型組合（System Font Stacks）就是從各主要操作系統的內定字型中挑選你想要的字型，組成一個套餐，這樣一來，不管訪客使用哪個操作系統來開啟網頁，都有至少一個內定的系統字型可以適用。
3. 頁面內文字框的設定：
如果你曾經在編輯頁面或文章時，針對個別文字框設定過網路字型，就必須回到文字框中取消網路字型，改為Default或inherit或空白。
4. 以上三處的設定完成後，現在要透過Additional CSS指令，設定我們想要的系統字型。
WordPress後台左邊清單，Appearance>Customize>Additional CSS
以下範例中的英文字型部分，我是參考了網路上的建議。然後以此為基礎，加上中文字型。這裡我選用的中文字型都是黑體（無襯邊），如果你想要使用別種字型，請自行搜尋可用的來替換即可。
黑體的簡體中文字型有以下：
Microsoft YaHei, 微软雅黑
Microsoft YaHei Light, 微软雅黑 Light
PingFang SC（苹方字体）
Hiragino Sans GB（冬青黑体）
Source Han Sans CN（思源黑体简体）
Noto Sans CJK SC（思源黑体简体）
CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟雅黑，顯示的字體比較不會太胖）：
黑體的繁體中文字型：
Microsoft JhengHei, 微軟正黑體
Microsoft JhengHei Light, 微軟正黑體 Light
PingFang TC（蘋方字體）
Hiragino Sans TC（冬青黑體）
Source Han Sans（思源黑體繁體）
Noto Sans CJK TC（思源黑體繁體）
CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟正黑體，顯示的效果比較好，不會太胖）：
以上就是System Font Stacks的設定方式。建議字型設定完成後，使用GTmetrix之類的測速網站檢測一下，從Waterfall chart的讀取紀錄中檢查是否已經沒有Google fonts網路字型的請求。
有人會問，如果不顧各家操作系統的內定字型，會有什麼結果？
舉例，如果在這個字型組合中只指定了Mac OS有的字型，而沒有納入Windows支援的字型，那麼當訪客是用IE或Edge開啟網頁，顯示的字型就是隨便系統決定。
再者，如果指定了英文字型但未指定中文字型，那麼也是任由操作系統根據其內建的規則（詳細規則為何並不清楚）去顯示中文。
由上可知，指定System Font Stacks的邏輯是對操作系統設定字型建議，以便對網頁顯示字型有一定程度的控制，而且是兼顧多個操作系統的狀況。其缺點則在於，無法百分之百控制到底結果會用哪種字型來顯示。
如何設定System Font Stacks
有關各操作系統的內定字型是什麼，在此就不贅述，有興趣可在網上查到（可以用system font stack去搜尋）。以下直接說明在製作WordPress網站時，如何設定System Font Stacks。
影響WordPress網頁字型設定的因素有好幾個，這幾個因素都要考量並正確設定，才能得到效果。牽涉到字型設定的有以下幾個地方：
1. 佈景主題（Theme）的基礎設定
2. 頁面編輯器（Editor/Page Builder）的基礎設定
3. 頁面內每個文字框的設定
4. Additional CSS （我們要在這裡加入System Font Stacks的指令）
先說明，我使用的佈景主題是Astra，頁面編輯器是Elementor。如果你使用的是不同的主題和編輯器，有可能設定的位置不同，但基本邏輯應該是相通的。
基本的邏輯就是，我們要先把基礎設定、頁面設定都設為default，頁面文字框也不要另外設定，最後再透過Additional CSS指令設定System Font Stacks，使這個設定通用於所有頁面。
1. 佈景主題的基礎設定：
進入WP後台，左邊清單找到Appearance>Customize>Global>Typography>Base Typography，在Family這裡要設為Default System Font
回到上一層，進入Headings，所有的Family都設為inherit
2-1. Elementor編輯器的基礎設定：
WP後台的左邊清單找到Elementor>Settings，Disable Default Fonts的選項打勾，並儲存設定（這裡的Default Fonts指的是Elementor自己內定的字型，而我們並不使用它）。
2-2. Elementor編輯器的通用設定：
開啟某個用Elementor編輯的網頁，進入編輯模式，在功能選單的左上角，漢堡按鈕點進去。
Site Settings > Global Fonts > 點擊每個鉛筆圖案，把字型都設為Default。
由上可知，指定System Font Stacks的邏輯是對操作系統設定字型建議，以便對網頁顯示字型有一定程度的控制，而且是兼顧多個操作系統的狀況。其缺點則在於，無法百分之百控制到底結果會用哪種字型來顯示。
如何設定System Font Stacks
有關各操作系統的內定字型是什麼，在此就不贅述，有興趣可在網上查到（可以用system font stack去搜尋）。以下直接說明在製作WordPress網站時，如何設定System Font Stacks。
影響WordPress網頁字型設定的因素有好幾個，這幾個因素都要考量並正確設定，才能得到效果。牽涉到字型設定的有以下幾個地方：
1. 佈景主題（Theme）的基礎設定
2. 頁面編輯器（Editor/Page Builder）的基礎設定
3. 頁面內每個文字框的設定
4. Additional CSS （我們要在這裡加入System Font Stacks的指令）
先說明，我使用的佈景主題是Astra，頁面編輯器是Elementor。如果你使用的是不同的主題和編輯器，有可能設定的位置不同，但基本邏輯應該是相通的。
基本的邏輯就是，我們要先把基礎設定、頁面設定都設為default，頁面文字框也不要另外設定，最後再透過Additional CSS指令設定System Font Stacks，使這個設定通用於所有頁面。
1. 佈景主題的基礎設定：
進入WP後台，左邊清單找到Appearance>Customize>Global>Typography>Base Typography，在Family這裡要設為Default System Font
回到上一層，進入Headings，所有的Family都設為inherit
2-1. Elementor編輯器的基礎設定：
WP後台的左邊清單找到Elementor>Settings，Disable Default Fonts的選項打勾，並儲存設定（這裡的Default Fonts指的是Elementor自己內定的字型，而我們並不使用它）。
2-2. Elementor編輯器的通用設定：
開啟某個用Elementor編輯的網頁，進入編輯模式，在功能選單的左上角，漢堡按鈕點進去。
Site Settings > Global Fonts > 點擊每個鉛筆圖案，把字型都設為Default。
3. 頁面內文字框的設定：
如果你曾經在編輯頁面或文章時，針對個別文字框設定過網路字型，就必須回到文字框中取消網路字型，改為Default或inherit或空白。
4. 以上三處的設定完成後，現在要透過Additional CSS指令，設定我們想要的系統字型。
WordPress後台左邊清單，Appearance>Customize>Additional CSS
以下範例中的英文字型部分，我是參考了網路上的建議。然後以此為基礎，加上中文字型。這裡我選用的中文字型都是黑體（無襯邊），如果你想要使用別種字型，請自行搜尋可用的來替換即可。
黑體的簡體中文字型有以下：
Microsoft YaHei, 微软雅黑
Microsoft YaHei Light, 微软雅黑 Light
PingFang SC（苹方字体）
Hiragino Sans GB（冬青黑体）
Source Han Sans CN（思源黑体简体）
Noto Sans CJK SC（思源黑体简体）
CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟雅黑，顯示的字體比較不會太胖）：
body, h5, h6 {font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "微軟正黑體", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4 {font-family: "Microsoft YaHei Light", "微软雅黑 Light", "Microsoft JhengHei Light", "微軟正黑體 Light", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
黑體的繁體中文字型：
Microsoft JhengHei, 微軟正黑體
Microsoft JhengHei Light, 微軟正黑體 Light
PingFang TC（蘋方字體）
Hiragino Sans TC（冬青黑體）
Source Han Sans（思源黑體繁體）
Noto Sans CJK TC（思源黑體繁體）
CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟正黑體，顯示的效果比較好，不會太胖）：
body, h5, h6 {font-family: "Microsoft JhengHei", "微軟正黑體", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4 {font-family: "Microsoft JhengHei Light", "微軟正黑體 Light", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
以上就是System Font Stacks的設定方式。建議字型設定完成後，使用GTmetrix之類的測速網站檢測一下，從Waterfall chart的讀取紀錄中檢查是否已經沒有Google fonts網路字型的請求。
