[技術分享] 如何引用 google 雲端字體到網頁設計中

在設計網頁的過程中，我們可能常常苦於能夠使用的字型太少，或者只有少數人電腦有安裝那個字型，使得你所使用的字型在別人的螢幕上是無法呈現的，而 Google Fonts 便可以幫助我們解決這樣的問題。



在 Google Fonts 中，Google 截至目前提供了 808 個免費字體，其中雖然大部分仍為英文，但在網頁設計的字型選擇上，仍然對設計師有非常大的幫助和選擇上的彈性。

STEP 1

使用方法非常簡單，首先到 Google Fonts 的網站（https://fonts.google.com/），接著從中挑選你喜歡的字體。

STEP 2

接著選擇你喜歡的字體，在右上角的 + 號點一下。

STEP 3

點選下方的導覽列，將會彈出你剛剛選擇過的字體。

STEP 4

取得和字體有關的 CSS 設定檔

STEP 5

只需要把上述步驟中所得到的 CSS 設定檔和字型名稱套用到你的網頁中，就可以成功引用字型了。在這裡我們以 CodePen 為例，示範如何在 Codepen 裡面引用 Google 雲端字體。

首先，在 Settings 當中設定 CSS 的部分，匯入剛剛取得的 CSS 連結。

STEP 6

接著套用剛剛所取得的字型名稱，頁面上即會呈現出你所選擇的字體，而且不會因為電腦有無安裝這個字體都可正常顯示。

---

等等...那中文呢？

你可能會問說...上面好像都是英文字體，有沒有中文的呢？

在這裡 Google 也有釋出免費的雲端中文字體，雖然選擇仍不是非常多，但除了非常普遍被應用的「思源黑體」，還包括「仿宋體」、黑體、楷體、明體等等，但這必須要到 Early Access Google Fonts （https://fonts.google.com/earlyaccess）才找得到喔！

以思源黑體為例，只要在這個網站上按 Ctrl+F 搜尋 「Noto Sans TC」，就可以取得這個字體的 CSS 設定檔連結和字型名稱了。

透過同樣的方法，把連結匯入網站中，選擇使用的字型，你就可以使用 Google 所提供的中文字體了！