前幾篇文章中有推薦大家使用 Google Fonts 來為網頁呈現字體，這篇文章就來詳細介紹 Google Fonts 到底是什麼、目前又有哪些便利的功能。
Google Fonts Early Access
Google Fonts 以英文字體資源為大宗，近年亦逐漸增加不同語系的字體，這些字體都是經過大量測試後，才加入正式列表中的。相信早期就有在網頁中使用思源黑體的各位已經知道， Google Fonts 其實還有一個「 Early Access 」的服務，專門用來公測各種不同語系的字體。 Google 一直致力於完善多語系字體的 Noto 計畫， 2018 年思源黑體終於畢業加入正式的 Google Fonts 列表中，右邊可以看到不少已經完成測試、加入正式列表的字體清單。
Early Access 原先針對繁體中文還有更多選擇，如圓體、楷體、仿宋體、明體，不過目前已經從頁面中移除，想要使用的話可以找一下網路資源，過去的連結基本上都還可以使用。不過！使用 Early Access 時應注意，由於是公測版本，仍有不少尚未優化完成的問題，例如缺漏字、部分文字顯示不佳、或是字重選擇不多等等，建議不要直接使用在正式的環境中。
為什麼使用 Google Fonts
你知道嗎？全球已經有 89% 以上的網站引用字體時使用 Google Fonts（ Adobe Typekit 則是 9% ）[註1]。不過，在馬上投入使用 Google Fonts 之前，可以先比較一下它究竟有哪些優點和缺點，如果手上的專案本身不能接受這些缺點，或是 Google Fonts 沒辦法達成專案所需的目標，那麼仍然應該考慮使用其他更細緻的方式來處理字體。
優點：
- 字體列表有強大的篩選、預覽功能，各別內頁還能選擇其他字體搭配預覽，方便設計師迅速找到理想英文字體組合
- 需要使用多種字體、字重時，有簡單的指標協助設計師先判斷負載是否過重
- 使用方式容易──選好字體後，複製貼上程式碼即可
- 利用字體切片（ sliced font ） [註2] 的方式，加快大型字體檔案的載入速度
- 屬於第三方服務，不會占用自家伺服器流量
- 因為字體檔案有快取（cross-site caching），越多網站使用、使用者載入的速度越快
- 持續有團隊在維護
缺點：
- 繁中字體種類不多，目前只有思源黑體和仿宋體（港版目前只有思源黑體）
- 受網速影響，通常還是需要一些載入時間才能讓整個網站的文字呈現好
- 一些開源字體可能不是最新的，仍有一些 bug
- 在中國載入速度不快、且不算穩定，有機會被擋
- 使用第三方服務可能有的風險（安全性、穩定性…）
關於開源字體不是最新的這點，筆者之前在某專案使用日文字體 Sawarabi Mincho ，結果在直行呈現時部分文字會和其他字疊在一起，一查才發現這是某舊版本才有的問題，字體作者已經更新版本──而且說真的作者更新得頗勤快XD 可能因為這樣所以 Google Fonts 上的版本還沒有同步到，最後只好回頭下載最新版檔案來用。
而這又可以稍微提到，有時客戶會提出希望使用日文字體來呈現中文字。目前簡體中文、日文確實字體種類相對多一些（日文版在 GitHub 上甚至有一個精美的展示頁面），不過使用日文或簡中字體時，還是要注意因為字集不同，一些繁中的常用字也會缺漏（如哈、啦等語助詞）。
Google Fonts 使用介紹
經過各方評估，若你決定在專案中採用 Google Fonts ，恭喜！ Google Fonts 的介面經過持續的更新，目前可說是相當成熟好用了，下面就來介紹使用流程及介面功能（以下介面截圖均截於 2020 年 11 月初，後續更新應該大同小異）。
首先來到目錄頁：
目錄頁可以很方便地搜尋、瀏覽想要的字體，介面中有：
- 搜尋及預覽列，可以：
- 直接搜尋特定字體名稱
- 預覽預設的詞組（自訂文字，或是文句、字母、段落、數字）
- 變更預覽字體的大小
- 篩選功能：
- 依據類型篩選字體（serif、sans-serif、display、handwriting、monospace）
- 依據語系篩選字體（Arabic、Chinese(Hong Kong)、Chinese(Traditional)…）
- 只篩出 variable fonts [註3]
- 變更排序方式（按趨勢、熱門、最新、名稱排序）及列表呈現方式
- 字體預覽，在 1.預覽列輸入的文字會即時以不同的字體呈現在此處
點擊下方的字體後，就會來到個別字體的內頁：
- 點擊「 Download family 」，可以直接下載本頁整包字體
- 頁面主體分為五個主要的段落，分別是：
- Select Styles ：
和目錄頁一樣，可以預覽自訂的文字內容及大小。點擊右邊的「 ＋ Select this style 」，便可以將特定字型加入右邊的 Selected family 區塊。如果該字體為 variable font ，則下方還會有額外的 Variable axes 區塊，可以直接選擇 variable font 字型（如下圖）。
- Glyphs：顯示字形預覽
- About：關於本字體的介紹，包含作者及相關字體等等
- License：本字體的授權說明
- Pairings：好用的功能！這邊會有一些常見的、可與本頁字體搭配的字體如下：
使用者可以很方便地：- 直接點標題來到此段落
- 替換搭配字體的字重及順序，點＋號可以將之加入 Selected family 區
- 預覽不同字體在標題及段落搭配的效果
- Select Styles ：
- 右邊的 Selected family 區塊，可以看到已經被加入的字體列表
- 在這邊可以很方便地複製API連結，分別有
<link>及@import兩種方式，擇一使用即可。其中，<link>應被貼在HTML的<head>內，而@import則應貼在css檔（或者你有使用預處理器，則放在sass檔）。 - 點擊「 Download all 」，則會一次下載所有選中的字體
就這樣，不論是設計師還是前端、後端工程師都能很快地上手，甚至能直接丟給客戶，讓甲方自己選字體，是否真的很簡單呢！
看完這些介紹，如果你想要關注最近 Google Fonts 新增了哪些功能、又多了什麼新字體，可以到官方推特帳號，接收即時的新訊。又如果 Google Fonts 的英文字體多到讓你不知從何下手，筆者建議可以參考 justfont 的 Google Fonts 字體推薦文章系列 [註4]，除了可以學習不同類型字體的特色，還能瞭解到各個字體家族的起源和設計細節。
利用 API 設定加速及優化專案中的 Google Fonts 資源
最後，筆者想回到老本行，透過說明 Google Fonts API 裡的參數，來補充一些通常前端工程師可能比較會需要的進階小技巧：
- 如何避免字體載入好之前畫面一片空白？
- 我的頁面裡只有一句話用了特殊字體，不想載入整包字體檔可以嗎？
在Google Fonts網站中選好字體後，產生的<link>或@import內，連結大致上會長得像這樣：
https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Roboto:ital,wght@0,300;1,300&display=swap
上面這個網址會載入 Lato 的字重 700 字型，以及 Roboto 的字重 300 字型、字重 300 斜體字型，並將font-display設置為swap。
這段網址便是存取 Google Fonts API 的方式，這段網址的組成如下：
https://fonts.googleapis.com/css2： base URL?：帶入後面的參數，接在 baseURL 後，只須寫一次family=Lato：載入的字體名稱，可以用&串接使用多個不同字體:wght@700：接續在字體名稱後，設定該字體要載入的具體字型（字重、斜體…）；如果沒有設定，則會載入預設值，0（normal）、400（regular）；如果選用的字體是 variable font ，則可以指定一個範圍如:wght@200..900&display=swap：設定font-display的值為swap，注意這邊已經是下一個參數，所以要用&隔開。
瞭解這幾個參數後，基本上就能自己撰寫、修改這段網址，不需要每次都回到 Google Fonts 官網去複製程式碼了。不過，最後這個font-display是做什麼的呢？又，是否還有其他更多參數可以使用？
設定font-display: swap，讓字體檔案尚未載好前，網頁不會一片空白
各位打開網頁時，是否有時會先看到一片空白、過一陣子後文字才啪！地一下全部跑出來？這是因為多數瀏覽器預設的字體載入方式屬於 FOIT（詳後述），網速慢時尤其容易遇到這個情形。
現在使用 Google Fonts 直接複製<link>或@import，連結預設就會帶好&display=swap這個參數。這個參數會讓 Google 載入字體時的@font-face設定包含font-display:swap，它有什麼功用呢？
font-display是 Chrome 49 之後推出的新 CSS 屬性 [註5]，目前除 IE 以外的主流瀏覽器基本都支援。
font-display有 5 種值，分別是：
auto（預設值）：會採用瀏覽器的預設值，通常是block，隨著瀏覽器的更新可能有所變化。block：只要字體沒有載入完成，就不會顯示文字，字體載入完成再一次把所有文字顯示出來，即標準的 FOITswap：瀏覽器會先從font-family的 fallback 設定中，選用下一個可用的替代字型來呈現文字，在載入字體的過程中逐一置換文字的字型fallback：block和swap的折衷版，在一小段時間（約 100 毫秒）內不顯示文字，如果在這段時間內字體沒有載好，就會以替代字型呈現文字；但是如果字體載超過 3 秒，就不會再換字體了optional：類似fallback，如果在 100 毫秒內內字體沒有載好，就會以替代字型呈現文字；但最終會根據使用者的連線速度來決定是否要加載、置換字體
因此如果專案有別的需求，要採用其他font-display值，也可以自行替換&display=後方的內容。
FOUT v.s. FOIT
FOUT（ Flash of Unstyled Text ）及 FOIT（ Flash of Invisible Text ）是兩種不同的處理字體載入時顯示字體的方式，下面直接用表格比較兩者的不同 [註6]：
| FOUT（Flash of Unstyled Text） | FOIT（Flash of Invisible Text） | |
|---|---|---|
| 字體載入時頁面呈現的效果 | 字體正在載入時先套用替代字型（可能是預載好的或是系統字型），字體載好時，再把字型替換掉 | 字體正在載入時頁面不顯示文字、字體載好才顯示文字 |
| 瀏覽器預設 | 舊版本瀏覽器及IE、Edge採用FOUT | 現今瀏覽器多優先採用FOIT，但多有一個臨界值：超過至少3秒沒有載入font-face，就會自動轉為替換字型（沒有此臨界值的話，頁面會一直空白下去） |
| 優點 | 字體載入慢時，也能先瀏覽頁面內容 | 如果頁面有很多emoji，直接用預設字型顯示可能會出現很多豆腐，使用FOIT可以避免此狀況 |
| 缺點 | 字體載好時，頁面上的文字會稍微閃爍，變為新的字型 | 字體載入慢時，頁面會有好幾秒空白 |
設定text參數，只引入有用到的字元，加速載入字體檔
Google Fonts API 還有一些只寫在文件裡的參數，目前光是使用網站介面產生的程式碼是沒辦法控制這些參數的，text就是其中之一。
在比較強調視覺表現的專案，如果只有一兩行字需要使用特殊字體呈現──例如只有網頁標題要使用某個藝術字體──這時便可利用text參數，帶入頁面中有用到的字元，如此一來就只會載入這些字元所需的部分檔案，大幅減少載入的字體檔案大小。
接續前面的範例，如果網頁中只有標題「 Hello World 」要使用字重 700 的 Lato 字型，則可設定text參數如下（記得用&與其他參數接起來，且內容需要 URL-encode ）：
https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap&text=Hello%20World
以上，若想深入了解 Google Fonts API ，建議閱讀官方的 API 文件。這其實是一份相當簡短的文件，可以設定的東西不多，看一下不虧！
[註1] 2020 年 11 月，來自 Datanyze 的全球統計資料。
[註2] 如系列前篇所述，中文字體動輒幾十 MB ，載入整包字體經常造成網頁載入資源過慢。 Google Fonts 團隊利用機器學習，找出中日韓文各個單字的使用頻率，並據此將龐大的字體檔案切分成眾多的小切片，藉由優先載入使用頻率高的部分文字，來加速網頁字體的呈現。詳細的說明可參考 Googleblog 發佈的文章： Google Fonts launches Japanese support ；或是這篇整理得相當清楚的中文 Web Font 文章：中文 Web Font in 2019 — 進化的 Google Fonts 和全新的 Adobe Fonts
[註3] 什麼是 variable font （可變字體）？這是近年來興起的一種字體規格，可以自由地調整文字的外觀，包含字重、字寬、襯線體 XY 軸粗度等等，可以在 Font Playground 玩玩看，感受一下他的自由度！
[註4] 延伸閱讀： Google Fonts 字體推薦文章系列
[註5] 延伸閱讀：`font-display` for the Masses
[註6] 這邊有個網站可以實際玩玩看，比較兩者的不同：FOIT vs. FOUT
系列文章目錄：
To 設計師：入門網頁字型指南 -1（網頁字體授權）
To 設計師：入門網頁字型指南 -2（網頁字體呈現基礎）
To 設計師：入門網頁字型指南 -3（網頁字體設定的複雜度光譜）
To 設計師：入門網頁字型指南 -4（實用工具：Google Fonts介紹）← 現在在這裡！
To 設計師：入門網頁字型指南 -5（設計彈性與多語系網站）
