CodePen 引入 Google Fonts 的 3 種方法
網頁中經常需要引入外部資源，其中字型更是不可或缺，好看的字體會為網頁質感大加分。免費的網頁字型資源以 Google Fonts 最為常見，今天就來使用 CodePen 試看看如何引入字型吧。
Google Fonts 介面
可以看到 Google Fonts 主要提供兩個路徑引入字體， 分別是 <link> 和 @import：
Google Fonts
想在 CodePen 引入美美的字體，主要可以透過以下三個方法：
一、<link> 或 @import 語法擇一放在 HTML 的 <head> 標籤裡面
這邊大家可能會有個疑問，CodePen 的 HTML 區塊是放置 body 標籤裡面的內容，那麼它的 head 標籤跑去哪裡了呢？
其實是藏在設定裡，點擊下圖所示的按鈕就會開啟面板，把 Google Fonts 提供的 <link> 、@import 選擇其中一個，程式碼貼到指定位置（如下圖）就可以成功引入囉
二、使用 @import 語法直接引入在 CSS 裡
不用透過 CodePen 內建的面板，只需要將 <style> 標籤刪除，只留下 @import 這段語法，就能在 CSS 區塊中使用，如果加入 <style> 標籤就會發生錯誤哦。
也要記得放在 CSS 最前面的位置，後續樣式才能吃到這個字型設定。
三、在 CSS 的設定中貼入網址
找到 <link> 裡面的 href 屬性值為 https://fonts.googleapis... 開頭的網址，或是複製 import url 裡面的網址，這兩個地方找到的網址會是一樣的，貼到 CSS 裡面板中的指定位置（如下圖）就大功告成！
欄位上方有個搜尋欄，可以找看看常用的框架或套件，例如 Bootstrap 就能搜尋到，透過這個方式就不需要特別到官方複製 CDN 就能輕鬆引入囉。
結論
以上三種方法只要選擇其中一個就可以了，希望大家都能順利引入美麗的字體！
引入成功之後也別忘記在 CSS 設定字體樣式，不然是看不到效果的，可以直接在 Google Fonts 複製它提供的樣式語法，相當方便。
今天就介紹到這裡，感謝看到這裡的大家。
你可能也想看
