Google Fonts Pair Finder 不會下載字型檔案、產生 @font-face 區塊,也不會產出可以直接放到你自己伺服器上的內容;它會產生一個指向 Google 端點的 Google Fonts CSS2 樣式表連結、兩個帶有通用後備字型的 class 規則,以及一段合併的程式碼片段。因此,自架字型是在使用這個工具之後,透過另一個獨立的工作流程來完成,使用的是你從每個字型系列的官方來源取得的合法授權檔案。這個工具的工作是用你的真實產品文案來縮窄字型選擇;把這些檔案搬到你自己的基礎設施上,則是你自己的事。
這樣的分工是刻意的。字型配對是關於層級、氛圍、對比與節奏的編輯判斷。而託管則是涉及你的司法管轄區、同意設計、內容安全政策與快取層級的法律、效能與基礎設施決策。把兩者塞進同一個小產生器裡會製造出假信心,所以 Pair Finder 對它能做與不能做的事保持誠實。
Pair Finder 實際輸出的內容
當你從八種精選組合中選擇一組時,這個工具會為兩個字型系列與各一個字重,建構一個嚴格的 Google Fonts CSS2 請求。舉例來說,Editorial contrast 組合會請求 Playfair Display 的 700 字重,以及 Source Sans 3 的 400 字重。Poster and utility 選項則會請求 Bebas Neue 的一般 400 字重,而不是去捏造該字型沒有的粗體請求。產生的 URL 使用 CSS2 端點、每個系列一個 family 參數、wght 軸值,以及 display=swap。字型名稱中的空白會變成加號,以維持連結的有效性。
你會拿到三個可重複使用的產出物。Copy link 按鈕只會寫入連結元素。Copy CSS 按鈕只會寫入兩個 class 規則,每個規則的結尾都帶有通用的 serif 或 sans-serif 後備字型,以便在遠端請求被擋下或緩慢時,文字仍然可以閱讀。Copy complete snippet 按鈕則會把連結與一個 style 區塊合併成一段標記。完整片段是 HTML 文件的典型可直接貼上內容,而 Copy link 與 Copy CSS 按鈕則適合偏好把標記與樣式表分開管理的團隊。
配對選擇、範例文字輸入與程式碼產生,全部都在你的瀏覽器本地端進行。這個工具唯一替你發出的網路請求是即時預覽,它會從 Google Fonts 取得所選的樣式表與字型檔案,讓你能在顯示尺寸與內文尺寸下看到真實的渲染結果。這八種組合涵蓋四種編輯對比類別,你可以並排比較後再決定採用哪一組。
如何挑選一組配對並複製連結
- 開啟 Google Fonts Pair Finder,從八種精選的標題與內文組合中,挑選一組符合你想要大致氛圍的配對。
- 在預覽欄位中輸入最多 240 個字元的代表性文字。請使用真實的標題、產品名稱或按鈕標籤,而不是 lorem ipsum 之類的佔位文字,因為你要測試的就是你實際文案的節奏。
- 在顯示尺寸與內文尺寸下比較同一段訊息,然後調整瀏覽器大小或縮放預覽,看看這組配對在窄與寬的行長下是否能維持表現。
- 切換不同的配對,比較節奏、字重對比與字型的色彩感。氛圍標籤是編輯上的指引,而不是字型設計的定律,所以請相信螢幕上的實際渲染,而不是文字描述。
- 在你的瀏覽器開發者工具中,把 Google Fonts 來源的網路存取停用,以測試後備行為,然後確認通用的 serif 或 sans-serif 後備字型仍然能讓頁面保持可閱讀。
- 測試你的網站實際會載入的任何腳本或語言。一個字型系列可能在拉丁文上有很強的覆蓋,但在斯拉夫文、阿拉伯文或 CJK 上卻很弱,所以請確認每個書寫系統都能正確渲染。
- 如果想要快速貼上,請點選 Copy complete snippet;如果你的專案把標記與樣式表放在不同檔案中,則可以分開點選 Copy link 與 Copy CSS。
- 在上線前,請把產生的程式碼對照你的隱私權政策、內容安全政策與效能預算進行檢視。
為什麼團隊會選擇自架字型
自架字型很少是字型設計上的選擇;幾乎都是合規、隱私或可靠度上的選擇。當訪客的瀏覽器載入 Google Fonts 樣式表與相關字型檔案時,瀏覽器會連線到 Google 所控制的端點。對某些團隊來說這完全不是問題;但對其他團隊,特別是受到 GDPR 嚴格審查的組織、有嚴格過濾的校園網路,或是需要嚴格內容安全政策的網站而言,每一個外部請求都是一個需要審慎考量的決定。
效能是第二個驅動因素。自架字型可以放在你自己的 CDN 背後,遵循你自己的快取標頭,並與其他靜態資產一起傳遞。你可以控制 Cache-Control 的值,只預載你實際使用的字重,並且可以精確決定要請求哪個字型系列與字重,而不是繼承公開 CSS API 所回傳的任何內容。穩定性也是一個安靜但真實的理由:如果 Google Fonts 在訪客所在的地區被擋下或被限速,你的字型就會掉回後備字型。自架的檔案在第三方來源無法使用時仍然能持續運作。
選定配對後建立自架工作流程
Pair Finder 會告訴你需要的字型系列名稱、字重與 CSS2 family 參數。這就是後續所有自架工作流程的輸入。典型的順序大致如下。首先,從該字型系列的官方來源(例如 Google Fonts 儲存庫)下載具合法授權的字型檔案,或從經過審核的鏡像站(例如 Fontsource)取得。其次,產生你所需要的網頁字型變體,通常是給現代瀏覽器用的 WOFF2,加上給較舊目標使用的 WOFF。第三,自行撰寫 @font-face 規則,宣告 font-family、font-style、font-weight、font-display: swap,以及指向你 CDN 上檔案的 src 列表。第四,把 HTML head 中原本的 Google Fonts 連結,替換成包含這些 @font-face 規則的本機樣式表,然後更新你的 class 規則,移除 Google Fonts 的 URL。
Pair Finder 的後備 class 為你提供了一個好的起點:每條產生的規則結尾都已經帶有通用的 serif 或 sans-serif 後備字型,所以當你把遠端請求換成本機檔案時,可以保留這個結尾。如果你還需要子集化(Subset)以去除未使用的字元範圍,請把它當作一個獨立步驟來執行,並確認產生的檔案仍然符合你所開始使用的字型系列、字重與授權中繼資料。
| 對比類別 | 顯示字型氛圍 | 內文字型氛圍 | 典型適用場景 |
|---|---|---|---|
| Editorial contrast | 襯線顯示字型,具表現力 | 中性無襯線,易於閱讀 | 長篇文章、雜誌、品牌網站 |
| Geometric + literary | 幾何無襯線,現代感 | 文學感襯線內文 | 行銷頁、代理商作品集 |
| Condensed + serif body | 壓縮顯示字型,密集 | 襯線內文,傳統感 | 海報、儀表板、窄側邊欄 |
| All-sans product | 無襯線顯示字型 | 無襯線內文 | UI、產品頁、技術文件 |
Pair Finder 中的氛圍標籤屬於編輯性質,一組在某種視窗、語言或內容密度下運作良好的配對,在另一種情境下可能會失敗。請把這個表格當作初步篩選,然後用你自己的文案與真實的介面狀態加以驗證。
上線前的合規與授權檢查
自架字型並不代表你跳脫了授權義務。每個 Google Fonts 字型系列都是以開放授權散布的,但確切的授權檔案、版本與署名要求會依字型系列與版本而有所不同。有些授權要求你在樣式表或致謝檔案中署名;有些則禁止將字型嵌入於可再散布的範本或硬體中。Pair Finder 不會重現授權文字,也不會追蹤發布後的中繼資料變更,所以在上線前請查閱該字型系列的官方列表或儲存庫,特別是針對那些會被散布到其他機器的應用程式、文件或範本。
在從 Google Fonts 連結轉換到自架檔案之前,請檢視你的內容安全政策、同意設計、你所在司法管轄區的隱私規則,以及你的託管環境。font-display: swap 可以讓字型載入期間的後備文字保持可見,但度量上的差異仍然可能導致版面位移,所以請設定穩定的版面尺寸,只預載經過衡量後證明有必要的檔案,並在緩慢或離線的條件下比較行為表現。兩組字型的自架請求並不會自動比系統字型堆疊更快;請測量實際的頁面,而不是把預覽當作效能測試。
超越配對名稱的字型品質
挑選兩個字型系列名稱只是字型設計中較容易的部分。更困難的是驗證這組配對能承受你實際的內容。請檢視層級、x 字高、行長、行高、字重對比、標點、數字、斜體、粗體強調、連結與表單控制項。請檢查後備度量,以免緩慢的遠端請求在真實字型終於繪製出來時產生明顯的跳動。請測試你網站所支援的每種語言與文字系統,因為一個在拉丁文上覆蓋極佳的字型系列,可能在另一種書寫系統上有所不足,迫使單一句子內部出現混用後備字型。
Pair Finder 的輸入框上限為 240 個字元,僅供預覽使用。範例文字永遠不會成為產生的 CSS2 URL 的一部分,所以你的草稿文案不會透過請求洩漏出去。空白輸入會掉回一個可見的本機佔位文字,而不是讓預覽當機。請利用這些防護機制,在真實條件下比較多組配對、縮窄你的選擇,然後把挑定的字型系列與字重,提交到符合你隱私、效能與授權限制的自架工作流程中。
若想深入了解,請參閱 Font Pairing Generator Link: Do You Need an API Key?。
若想深入了解,請參閱 Does a Font Pairing Generator Contact Google in Preview?。