如果您的網站想要跳脫傳統的網頁字型，讓網站看起來更加的有特色，使用 " Google Fonts " 是個不錯的選擇。

Google 從 2014 年開始就陸續推出一系列的字型提供給需要的人使用，並且還很佛心的提供語法讓您可以直接使用在網頁上，讓您不用煩惱瀏覽者的電腦是不是沒有您所選擇的字型，而無法看到最佳的網站效果。

目前網站上提供較多的是英文字型，中文字型則有 "思源黑體"、"思源宋體" 可以選擇。本期的電子報告訴您要怎麼在網站上使用 Google 提供的免費字型。

跟著我們的步驟，您就可以輕鬆為網站修改字型

• 步驟 01

  請先到 Google Font 官網，選擇您所需要的字型。您可以依照需求篩選需要的文字，例如文字有沒有襯線、語言…等，網站上會依照您的需求篩選出適合您的字型。

  

• 步驟 02

  經過篩選，我們這裡以 “ Noto Serif TC (思源宋體) ” 當作範例，點選字體進入下一頁。

  

• 步驟 03

  選擇字型的粗細，要下載的字型請點選按鈕 “ + Select this style ” (紅框處)，右邊會出現已經選擇的字型 (橘框處)。

  

• 步驟 04

  接下來將我們需要的選項內容拷貝起來，步驟如下：

  • 選擇 “Embed ”分頁。
  • 之後點選 “ @import ”按鈕。
  • 將紅框的內容複製起來，先貼到記事本上放著備用。

   

  複製內容範例

  • < style >
    @ import url ( ' https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&display=swap ' );
    < / style >

  • font-family: 'Noto Serif TC', serif;

  

• 步驟 05

  將複製的語法做個微調加到網站的編輯器上，例如：

  < style > 

  @import url ( ' https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&display=swap ' );

  * { font-family: 'Noto Serif TC', serif; }

  < /style >

  

• 步驟 06

  完成了，我們可以看到網站的字型由原本的 “黑體“ 變成了 “宋體“ 。

  

上一期電子報我們有提到，線上字型非常實用，但是必須要審慎適當的使用這些文字的調整，因為需要留意到瀏覽者瀏覽網頁的速度，我們建議可以指定：標題、公司標語等有特殊意義的文字，經由這些文字字型的指定，讓瀏覽者能夠有更好的視覺集中度。

下一期電子報，我們將告訴您 “線上字型“ 的運作模式，還有與網頁瀏覽速度的關聯性。