Webfont讓你實現在網頁上用自己想要的字型
我們都希望網站看起來美美的，字體應用是關鍵！透過 webfont（網路字型）服務，就能擺脫新細明體、蘋果儷黑這些系統內建字型了！除了有各種語系的付費 webfont 服務外，也有許多馬上就能使用的免費服務。這篇文章就要手把手教你使用 Google Fonts 的免費 webfont 服務。
網路字型的授權
近日發生了台灣知名晶片製造商網站，擅自將 Justfont 所出版的「激燃體」直接嵌於網頁中的侵權事件，後來追究發現是網頁設計的外包廠商所為。同為網頁設計公司，這樣的行為讓我覺得非常「不可思議」！
就算我們購買了合法的字型檔案，並不代表檔案可以任意嵌入網站使用，大部分的授權範圍都不包含在網頁上使用。這樣的行為就像把軟體直接上傳至網路上讓人下載一樣，是侵權行為。
網頁上要使用各種字型並不是不行，但必須要用合法授權的 webfont 服務，通常這類的服務，字型廠商是會額外收費的。不過網路上也有許多免費的 webfont 服務，像是 Google Fonts、Adobe Fonts（訂閱 Adobe Creative Cloud 使用者）。
手把手帶你用 Google Fonts
Google Fonts 大概是目前全世界最多人用的 webfont 服務，裏頭包含超過千種各式語系字型，速度與穩定度大概也是最好的。只是 Google Fonts 內建的正體中文字型並不多，只有思源黑體及明體。
Google Fonts 網站：https://fonts.google.com/
加入字型
進入 Google Fonts 網站後，可以透過各種條件篩選字型，找到自己想要的字型之後，就可以點選進入檢視該字體家族（font family）的各種字重或樣式，接著再選擇自己需要的字重或樣式，點選右方的「Select this style」連結即可儲存。
將字型放進網頁
將「所有」需要的字型都加入完成後，就可以透過右方跳出的區塊依照步驟，將 Google Fonts 中選好的字型放到自己的網頁中。
首先我們要先將 Google Fonts 來源加入網頁的<head>中。Google Fonts 提供了<link>及 @import 的方式，不論使用哪一種，都可以直接將程式碼貼在<head>中。
最後再到 CSS 中，使用 font-family 屬性將字型名稱寫到要使用字型的 selector 中即可！
中英字型混用的方式
如果網頁中有需要使用多種字型，那麼可以在 CSS 的 selector 中填入正確的字型名稱。如果是中、西文分別要使用不同的字型，則必須在 font-family 屬性中，先寫上西文字型，後寫上中文字型即可！
謝謝你耐心閱讀我的文章
你可以在堯舜設計網站看到我們的案例及作品，也可以歡迎追蹤下列媒體獲得更多資訊：
堯舜設計臉書粉絲頁
Misa 老師耍前端 Instagram：簡單前端設計應用與知識。
Misa 老師愛講話 YouTube 頻道：各種設計疑難雜症探討。
