修改 Hugo 中導覽列的字型

封面圖片為修改前與修改後的對比圖。

前言

相信大家在建立網站初期，會發現網站預設的字體其實不怎麼好看。本文將以 Hugo 為靜態網頁生成的基底，介紹如何將網站的導覽列換成自己喜歡的字體。

尋找字體

網路上有許多提供字體的網站，本次介紹使用 Google fonts 以嵌入程式碼的方式將字體導入網站。

選定字體

首先，進入 Google fonts 找到自己喜歡的字體，比如我選定 LXGW WenKai TC 這個字體，並依下圖第一步驟點選 Get font 按鈕。

取得嵌入的程式碼

第二步驟，點選 <> Get embed code 按鈕。

接下來即可依照 Google fonts 所提示的步驟將程式碼嵌入網站了。

第三步驟，切換到 @import 選項。

請記住第四步驟與第五步驟中的程式碼，稍後會用到。

嵌入字體

調整設定

接下來，在網站根目錄找到 hugo.toml 或 config.toml 設定檔並找到 [params] ，新增如下資訊。

1
2
3
4
5
6
7
8

[params]
  [params.page]
    [params.page.library]
      [params.page.library.css]
        # located in "assets/"
        # Or
        # someCSS = "https://cdn.example.com/some.css"
        customCSS = "/css/custom.css" 

新增 custom.css 檔案

移動到網站根目錄的 /assets/css/ 路徑下新增 custom.css 檔案，並填入在 #取得嵌入的程式碼 中記住的第四步驟及第五步驟。

1
2
3
4
5
6
7

/* 新增字體 LXGW WenKai TC */
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');
.lxgw-wenkai-tc-regular {
    font-family: "LXGW WenKai TC", cursive;
    font-weight: 400;
    font-style: normal;
  }

至此就成功將字體嵌入網站了。

更換導覽列字體

網頁原始碼

以下使用 Google Chrome 示範取出網頁原始碼，請依不同瀏覽器的方法找出網頁原始碼。

到網站任一頁面，按下滑鼠右鍵喚出選單，按下 檢視網頁原始碼 。

找出與導覽列文字相符的字並記住該字串前的 class 屬性的值。如下圖，本站導覽列文字 class 屬性的值為 menu-item 。

修改 custom.css 檔案

回到網站根目錄的 /assets/css/custom.css 檔案，填入以下資訊強制更換導覽列字體。

1
2
3
4

/* 修改導覽列（文章、標籤、分類、關於）字體 */
.menu-item { 
    font-family: "LXGW WenKai TC", cursive !important;
}

別忘記將上述程式碼的 menu-item 和 "LXGW WenKai TC" 換成自己的 class 屬性的值和字體的值。其中 menu-item 前有一個英文的句號 . ，別忘記填入。

完整程式碼看起來會像是這樣。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 新增字體 LXGW WenKai TC */
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');
.lxgw-wenkai-tc-regular {
    font-family: "LXGW WenKai TC", cursive;
    font-weight: 400;
    font-style: normal;
  }

/* 修改導覽列（文章、標籤、分類、關於）字體 */
.menu-item { 
    font-family: "LXGW WenKai TC", cursive !important;
}

修改 link.html 檔案

最後到網站根目錄的 /layouts/partials/head/ 路徑下找到 link.html 檔案，並在最後加入下方程式碼，即完成修改導覽列字體。

1
2
3

{{- /* custom.css */ -}}
{{ $customCSS := resources.Get "css/custom.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $customCSS.Permalink }}">

結語

修改網站字體雖然是一件簡單的小事，但它能顯著提升網站的視覺美感，讓整體設計更符合個人風格與形象。透過選擇合適的字體，網站可以變得更具吸引力，並提升使用者的瀏覽體驗。而我們也能針對不同元素設定專屬字體，使網站的層次更加豐富。希望本篇教學能幫助大家順利替換網站的導覽列字體，打造屬於自己獨特風格的網頁！

運行環境

• Hugo 0.144.2
• LoveIt 主題（2025 年 2 月 21 日 Github 上的版本）

參考資料

• Google。（無日期）。Google Fonts。Google。2025年3月4日參考自 https://fonts.google.com/