「取得」Google Fonts 實際上意味著什麼
將 Google Fonts 放到網頁上,代表透過公開的 CSS2 端點請求一個字型家族與字重,把產生的樣式表連結放進 HTML 的 head 裡,然後把家族名稱套用到你標題與內文的 CSS 類別。CSS2 連結是一個網址,只向 Google 的 CDN 索取你專案實際需要的字型檔,並加上 display=swap 參數,讓備用文字在自訂字型載入前保持可見。Google Fonts Pair Finder 為那個連結提供快速的上手方式:從八組經過審核的標題與內文組合中挑選,輸入你自己的範例文字,再複製一段完整的程式碼片段,其中每個具名家族後面都已經加上通用的備用字型。配對選擇與程式碼產生都在你的瀏覽器本地端執行,而樣式表連結指向的是公開的 CSS2 端點——也就是開發者手寫請求時使用的同一個端點,而且不需要 Google 目錄中繼資料所用的 Developer API 金鑰。
兩塊要素讓 Google Fonts 在實際頁面上運作:瀏覽器在載入時取得的樣式表連結,以及把文字指向該連結所定義家族名稱的 CSS 規則。樣式表連結是位於 fonts.googleapis.com 的一個網址,向 Google 的 CDN 請求一個或多個字型檔;CSS 規則則是你自己撰寫的部分,但必須對應到連結中宣告的家族名稱。
連結格式很重要。CSS2 說明文件所描述的 Google Fonts CSS2 端點,每個家族使用一個 family 參數,再加上 wght 軸數值與 display=swap 提示。家族名稱中的空格會變成加號,所以 "Playfair Display" 在網址中會顯示為 Playfair+Display。這個端點是公開的,這也是為什麼你可以直接把連結貼到頁面中,不需要驗證或提供金鑰。
這個格式正是 Google Fonts Pair Finder 為你產生的內容。你不必手動輸入請求,只要比較幾個預先建好的組合,然後複製符合你選擇的連結與 CSS。
六個步驟產生 CSS2 連結與對應的 CSS
- 開啟 Google Fonts Pair Finder,根據產品需要的氛圍,從八組經過審核的配對中挑選一組。
- 在範例輸入欄位中輸入最多 240 個字元的代表性文字——可以是真實的標題、產品文案,或是從實際頁面擷取的描述。
- 在顯示尺寸與內文尺寸下比較同一段訊息,並注意工具在每個家族名稱後自動加上的通用備用字型。
- 切換到你網站實際會發佈的每種語言與文字系統,而不只是拉丁文範例,因為某個家族可能對拉丁文支援良好,卻缺少其他書寫系統。
- 使用三個複製按鈕,分別只取得連結、只取得兩條 CSS 規則,或取得把連結與樣式區塊合併的完整片段。空白輸入會顯示本地端的佔位文字,而非讓預覽當機。
- 把連結貼到 HTML 的 head,把 CSS 規則貼到你的樣式表,然後在上線前檢視隱私、授權、內容安全政策與效能。
工具產生程式碼的結構解析
Pair Finder 提供三種輸出,因為每種各自解決不同的貼上需求。了解每個輸出包含哪些內容,有助於你為建置流程挑選正確的格式。
| 輸出 | 包含的內容 | 最佳使用時機 |
|---|---|---|
| 複製連結 | 指向 CSS2 端點且帶有 display=swap 的 link 元素 | 你已經有樣式系統,只需要字型請求 |
| 複製 CSS | 兩條可重複使用的類別規則,每個家族名稱後都帶有通用備用字型 | 你正在手寫樣式表,想要乾淨、範圍明確的規則 |
| 複製完整片段 | 把 link 元素與包含兩個類別的樣式區塊合併在一起 | 你想把整組配對直接放進空白的原型或示範頁面 |
每個家族只以一個明確的字重請求。八筆資料來自 Google Fonts 收藏,並與 Google 的儲存庫中繼資料交叉核對,在工具發佈前另外透過 Fontsource 獨立驗證。你不會拿到一個不存在的字重請求,例如向 Bebas Neue 請求一個字體廠商從未發佈的粗體切版。以 Editorial 對比配對為例,它會請求 Playfair Display 的 700,以及 Source Sans 3 的 400,而這也是產生器唯一要求的字重。
你輸入的範例文字永遠不會進入網址。輸入內容只會改變預覽文字;它並不會作為 CSS API 的 text 參數送出,因此不會透過產生的請求洩漏範例文字。空白輸入會切換為可見的本地佔位文字,讓預覽持續運作。
挑選符合品牌風格的配對
這八組組合刻意精簡。它們是八個策展過的起點,而不是客觀最佳字型配對的排名,所謂的氛圍標籤屬於編輯建議,而不是排版規則。整組收藏涵蓋四種對比類型:襯線標題搭配中性無襯線內文、幾何無襯線搭配文學性內文、壓縮標題搭配襯線內文,以及全無襯線的產品組合。在旅遊部落格上看起來優美的配對,放到資訊密集的儀表板上可能會崩解;在英文中表現良好的配對,一旦放上西里爾字母或天城文的標題,也可能失靈。
| 對比類型 | 典型用途 | 注意事項 |
|---|---|---|
| 襯線標題 + 中性無襯線內文 | 編輯類內容、長篇文章、品牌故事 | 小尺寸內文容易出現度量不一致 |
| 幾何無襯線 + 文學性內文 | 具有個性的現代產品頁面 | 斜體與連結樣式需要仔細檢查 |
| 壓縮標題 + 襯線內文 | 海報、行銷素材、密集的導覽標籤 | 壓縮切版可能擠壓數字與標點 |
| 全無襯線的產品組合 | UI 比重高的應用程式、電子商務、儀表板 | 層級完全依賴字重對比來建立 |
適用於某個品牌、語言、視窗或內容密度的配對,在另一個情境下可能失敗。請把 Pair Finder 視為篩選步驟。用它把龐大的目錄縮窄到兩、三個合理的候選,再根據你的實際內容、真實視窗,以及使用者閱讀的書寫系統逐一驗證。
上線前的隱私、授權與效能考量
載入遠端字型代表訪客的瀏覽器會連到位於 Google 控制的端點,同時索取樣式表與字型檔。這涉及隱私、法律、效能與可靠性的影響,會依司法管轄區、同意設計、內容安全政策、主機環境與組織而異。封鎖第三方請求的 CSP 也會一併封鎖 CSS2 連結,因此在發佈前請先檢視你的標頭規則。
字型授權仍需依專案進行個別檢視。Google Fonts 家族以開放授權釋出,但確切的授權檔案與任何署名義務,仍歸屬於各家族與版本。這個產生器不會重現授權文字、不保證商標使用許可,也不會追蹤後續的中繼資料變動。在上線前請查閱官方的家族頁面或儲存庫,特別是在應用程式、文件、硬體或轉發的範本中嵌入字型時。
在效能方面,這個工具刻意只為每個家族請求一個字重,而不是完整的範圍,並加上 display=swap,讓備用文字立即顯示。雙家族請求不一定比系統字型堆疊更快,預覽本身也不是效能測試。請測量實際頁面、設定穩定的版面尺寸、只在測量結果支持時才預載,並在緩慢或離線的環境下比較行為。需要控制快取或排除第三方請求的團隊,可以自行託管經核准的字型檔,但這個工具不會產生 @font-face 規則,也不會下載檔案。如果你的合規要求必須採用自行託管,請使用經核准的自行託管流程。
用你的實際內容測試排版
配對品質遠比把兩個家族名稱配在一起更為複雜。在上線前,請評估層級、x 字高、行長、行高、字重對比、標點、數字、斜體、粗體強調、連結、表單控制項,以及備用字型的度量。請測試網站支援的每種語言與書寫系統,因為某個家族可能在拉丁文方面涵蓋完善,卻缺少其他書寫系統,造成同一句中混用備用字型的情況。這八組選項並未聲稱具備全面的語言涵蓋。
遠端字型載入也可能改變首次繪製後的版面。display=swap 能讓備用文字保持可見,但度量差異仍可能造成版面位移。請為容器設定明確的尺寸,只請求你實際使用的家族與字重,並在貼近真實的網路條件下比較行為。請把預覽視為快速的視覺篩選工具,而非取代以使用者實際看到的文字、書寫系統與介面狀態進行的完整評估。
延伸閱讀:如何搭配字型:用你的文字測試八組組合。
延伸閱讀:字型配對產生器的選擇真的是客觀最佳嗎?。