跳转至

MkDocs import Google Fonts

1. 使用 mkdocs.yml 設置 導航、大標題

如果你要自定義「導航」和「大標題」為特殊字體（如 Zilla Slab） mkdocs.yml 預設只能設定兩種。

打開你的 mkdocs.yml。 在 theme 區塊下添加 font 設定：

theme:
  name: material
  font:
    text: Ubuntu          # 內文：對應你想要的中英文混雜字體
    code: JetBrains Mono  # 程式碼字體

2. extra.css 中手動匯入

在 extra.css 中手動匯入（自定義程度最高）

2.1. mkdocs.yml 配置

mkdocs.yml 已經關聯了這個 CSS 檔案

extra_css:
  - stylesheets/extra.css

禁用預設字體（可選）：如果你發現字體沒變，有可能是 Material 主題的預設字體優先權較高，可以在 mkdocs.yml 中把預設字體功能關掉，完全由 CSS 掌控

theme:
  name: material
  font: false  # 禁用主題內建載入，完全使用 extra.css 的 @import

2.2. 在 Google Fonts 挑選字體

  1. 前往 Google Fonts。

  2. 挑選字體（例如：Zilla Slab, Ubuntu, Noto Sans TC）。

  3. 點擊 "Get font" -> "Get embed code"。

  4. 在右側面板選擇 "@import" 標籤。

通常會長這樣 Embed code in the <head> of your html 

<style> @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap'); </style>
Shadows Into Light: CSS class 
.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

2.3. 寫入 extra.css

將代碼複製到 docs/stylesheets/extra.css 的第一行：

/* 必須放在 CSS 檔案的最上方 */
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

/* 套用到全域內文 (中英文混雜) */
:root {
  --md-text-font: "Ubuntu", "Noto Sans TC", sans-serif !important;
}

/* 套用到特定的大標題與導航 */
h1, h2, h3, .md-header__title {
  font-family: "Shadows Into Light", cursive;
}

/* 套用到導航欄項目 */
.md-nav__link {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}