Google Fonts 可能是目前收錄最多免費英文字型的網站，去年大改版後，原本動線不佳和瀏覽不便等情形已經獲得改善，走向更簡約的設計風格，整體瀏覽感覺是很棒的！假如你不喜歡它的字型搜尋或測試功能，也有開發者自行開發第三方應用，例如 FontCDN 更好用的網頁字型搜尋工具，能直接在網頁快速套用 Google 字型的 Font Swap 外掛程式或是 Better Font Finder 更直覺的字型檢視器，都是這網站之外值得一試的免費服務。
本文要再來推薦一款線上工具「Type Hero」，可在瀏覽器裡快速、即時測試 Google Fonts 字型顯示效果，只要將內文貼上，就能直接在瀏覽器內切換字重（Font Weight）、風格和字型大小，調整不一樣的文字和背景顏色並即時顯示於網頁上。
雖然 Google Fonts 網站本身就已經有這些功能，但似乎不夠直覺好用，而且無法變換文字和背景色來查看更接近真實的顯示效果，如果你想測試某些 Google Fonts 字型在特定內容、大小、顏色的顯示效果，Type Hero 是能達成需求的線上工具。可惜收錄字型好像不夠完整，有部分無法找到。
網站名稱：Type Hero
網站鏈結：https://typehero.now.sh/
使用教學
STEP 1
開啟 Type Hero 網站後，在右邊測試框輸入要套用字型效果的內容，Google Fonts 目前提供的網頁字型以英文字型為主，如果輸入中文字是不會有變化的（雖然 Google Fonts 也有思源黑體，但還在 Early Access 階段，我在這篇教學有提到如何使用）。
STEP 2
接著從左上角的「TEXT」輸入字型名稱來搜尋、選擇 Google Fonts 字型。
當你選擇字型後，應該就能在 Type Hero 右側也就是你剛才輸入內容的地方看到效果，緊接著可以從下方來設定字重（Font Weight），每個字型提供的字重都不一樣，大部分可能都只有一兩種，數字越小的越細，相對來說數字越大的也會越粗。
右側的數值則是用來調整文字大小。
STEP 3
最後，從 Background 變換背景顏色（上方則是文字顏色），就能看到某個字型、內容在特定顏色下呈現出來的效果囉！因為是直接載入 Google Fonts 網頁字型，不用另外下載檔案或安裝字型，若測試效果符合你的期待，就能回到 Google Fonts 來下載或取得 Webfont 程式碼。
值得一試的三個理由：
- 直接在瀏覽器內預覽 Google Fonts 各種英文字型效果
- 可切換不同字重、字型大小和顏色
- 相較於 Google Fonts 內建功能，Type Hero 操作上更簡單
想在 Google 搜尋優先看到免費資源網的內容？
加入 Google 偏好來源
探索更多來自 免費資源網 的內容
訂閱即可透過電子郵件收到最新文章。
