2023-07-22|閱讀時間 ‧ 約 3 分鐘

CodePen 引入 Google Fonts 的 3 種方法

網頁中經常需要引入外部資源，其中字型更是不可或缺，好看的字體會為網頁質感大加分。免費的網頁字型資源以 Google Fonts 最為常見，今天就來使用 CodePen 試看看如何引入字型吧。

Google Fonts 介面

可以看到 Google Fonts 主要提供兩個路徑引入字體，分別是 <link> 和 @import：

Google Fonts

想在 CodePen 引入美美的字體，主要可以透過以下三個方法：

這邊大家可能會有個疑問，CodePen 的 HTML 區塊是放置 body 標籤裡面的內容，那麼它的 head 標籤跑去哪裡了呢？

其實是藏在設定裡，點擊下圖所示的按鈕就會開啟面板，把 Google Fonts 提供的 <link> 、@import 選擇其中一個，程式碼貼到指定位置（如下圖）就可以成功引入囉

不用透過 CodePen 內建的面板，只需要將 <style> 標籤刪除，只留下 @import 這段語法，就能在 CSS 區塊中使用，如果加入 <style> 標籤就會發生錯誤哦。

也要記得放在 CSS 最前面的位置，後續樣式才能吃到這個字型設定。

找到 <link> 裡面的 href 屬性值為 https://fonts.googleapis... 開頭的網址，或是複製 import url 裡面的網址，這兩個地方找到的網址會是一樣的，貼到 CSS 裡面板中的指定位置（如下圖）就大功告成！

欄位上方有個搜尋欄，可以找看看常用的框架或套件，例如 Bootstrap 就能搜尋到，透過這個方式就不需要特別到官方複製 CDN 就能輕鬆引入囉。

以上三種方法只要選擇其中一個就可以了，希望大家都能順利引入美麗的字體！

引入成功之後也別忘記在 CSS 設定字體樣式，不然是看不到效果的，可以直接在 Google Fonts 複製它提供的樣式語法，相當方便。

今天就介紹到這裡，感謝看到這裡的大家。

分享至

成為作者繼續創作的動力吧！