使用外部字型

除了使用系統預設字型，進行網頁設計時也常常會使用更多漂亮的「外部字型」，這篇教學會介紹 Google Fonts 外部字型服務，也會示範透過 CSS link 和 @import 和 @font-face 這三種方法載入外部字型。

使用通用字型參考：使用通用字型

快速導覽：

• 使用 Google Fonts 作為外部字型來源
• 使用 CSS link 或 @import 載入外部字型
• 使用 @font-face 載入外部字型

使用 Google Fonts 作為外部字型來源

Google Fonts 是 Google 提供的免費字型平台，可以從中選擇想要的外部字型，將其下載使用或透過 API 直接連接使用，從下方網址可以前往 Google Fonts。

前往 Google Fonts：https://fonts.google.com/

選擇的字型後 ( 範例挑選 Rubik Mono One )，點擊右上方「Get font」。

點擊「Download all」會把字型下載到電腦中，點擊「Get embed code」則可以直接透過 API 連結的方式使用這個字型。

點擊「Get embed code」之後，可以看見使用 CSS link 或 @import 載入字型的方法 ( 接下來的段落會介紹 )，通常只要將下方的程式碼複製到網頁中，就可以開始使用這個字型。

使用 CSS link 或 @import 載入外部字型

如果不滿意系統預設的字型，而手邊又剛好有適合的外部字型網址，這時就能透過 CSS link 或 @import 的方式載入並使用外部字型，前一個段落所介紹的 Google Fonts，同樣也提供了這兩個載入的方式。

• 使用 CSS link

  和載入外部 CSS 的作法相同，將載入的 CSS 網址換成外部字型的網址，就能夠使用該字型，基本寫法如下：

  <link href="外部字型的網址" rel="stylesheet">
  

  下方的範例透過 CSS link 的方式使用 Google Fonts 的 Rubik Mono One 字型。

  <!-- HTML 程式碼 -->
  <link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet">
  <div>Hello OXXO, Good morning...</div>
  
  <!-- CSS 程式碼 -->
  <style>
    div {
      font-family: "Rubik Mono One", monospace;
    }
  </style>
  

  

• 使用 @import

  運用 CSS 的 @import 方法，載入的外部字型網址，就能使用該字體。

  @import url('外部字型的網址');
  

  下方的範例透過 @import 的方式使用 Google Fonts 的 Rubik Mono One 字型。

  <!-- HTML 程式碼 --> 
  <div>Hello OXXO, Good morning...</div>
  
  <!-- CSS 程式碼 -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
    div {
      font-family: "Rubik Mono One", monospace;
    }
  </style>
  

  

使用 @font-face 載入外部字型

@font-face 是 CSS 定義字型的方法，可以將預設字型和外部字型 ( 自己電腦、其他字型連結等 ) 互相搭配使用，因此也可以運用 @font-face 下載外部字型。

教學參考：@font-face 定義字型

@font-face 基本上必須包含「font-family 字型名稱」和「src 字型來源」兩個屬性，寫法如下：

@font-face {
  font-family: "字型名稱";
  src: "字型來源";
}

開啟剛剛 Google Fonts 的字型檔案，複製字型網址後，用瀏覽器開啟網址。

可以看見字型檔案裡也是有使用 @font-face 定義字型，複製「latin」裡的字型網址 ( 參考連結 )。

參考下方範例，使用 @font-face 的 src 屬性貼上字型網址，並將 font-family 設定為「oxxo test」，就可以使用自訂的字型名稱，套用對應的外部字型。

<!-- HTML 程式碼 --> 
<div>Hello OXXO, Good morning...</div>

<!-- CSS 程式碼 -->
<style>
  @font-face {
    font-family: 'oxxo test';
    src: url(https://fonts.gstatic.com/s/rubikmonoone/v18/UqyJK8kPP3hjw6ANTdfRk9YSN983TKUJcOj8.woff2);
  }

  div {
    font-family: "oxxo test", monospace;
  }
</style>

小結

使用 CSS 套用外部字型的方式，跟載入外部圖片的原理大同小異，只要知道外部字型的網址，就能運用 CSS link、@import 和 @font-face 三種方法載入，相信大家應該已經磨刀霍霍，準備開始使用一些特別又漂亮的外部字型了，不過雖然外部字型很好用，但檔案過大的字型 ( 例如中文字 ) 會造成網頁讀取速度和樣式呈現順序差異的狀況，需要特別注意！

更多教學參考：@font-face 定義字型

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～