Skip to content

設定字體（Font）

在 Material for MkDocs 中，你可以使用 Google Fonts 或 自訂字體 來更改網站的字型。以下是設定方法：

🔹 1. 使用 Google Fonts（簡單設定）

MkDocs Material 內建支援 Google Fonts，你可以直接在 mkdocs.yml 設定：

theme:
  name: material
  font:
    text: Roboto  # 內文字體
    code: Fira Code  # 程式碼字體

📌 常見 Google Fonts - Roboto（預設） - Noto Sans - Lato - Open Sans - Source Sans Pro - Fira Code（適合程式碼）

🔹 2. 使用自訂 Google Fonts

如果你想要使用 非預設的 Google Fonts，可以手動載入：

步驟 1：在 mkdocs.yml 加入字體

extra_css:
  - https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap

步驟 2：在 extra.css 設定

建立 docs/assets/extra.css，並加入：

:root {
    --md-text-font-family: "Poppins", sans-serif;  /* 內文字體 */
    --md-code-font-family: "Fira Code", monospace; /* 程式碼字體 */
}

🔹 3. 使用自訂字體（本地字型）

如果你有自己的 字體檔案（.woff2 / .ttf），可以手動加入：

步驟 1：將字體檔案放入 docs/assets/fonts/

docs/
├── assets/
│   ├── fonts/
│   │   ├── custom-font.woff2
│   │   ├── custom-font.ttf
│   ├── extra.css

步驟 2：在 extra.css 設定

@font-face {
    font-family: "MyCustomFont";
    src: url("assets/fonts/custom-font.woff2") format("woff2"),
         url("assets/fonts/custom-font.ttf") format("truetype");
}

:root {
    --md-text-font-family: "MyCustomFont", sans-serif;
}

步驟 3：在 mkdocs.yml 啟用

extra_css:
  - assets/extra.css

📝 總結

方法 設定方式
內建 Google Fonts font: text: Roboto
自訂 Google Fonts extra_css: https://fonts.googleapis.com/css2?
本地字體（自訂字型） @font-face + extra.css

這樣你就能輕鬆在 MkDocs Material 設定字體 🚀🎨！

📖 參考資料