在網頁開發中使用精美的字體可以大幅提升用戶體驗。
本文將整理如何在 Django 專案中使用代表性的網頁字體 Poppins，以及在容器環境中穩定使用系統基本字體 sans-serif 的方法。

Django 字體與 Docker 兼容性視覺圖

1. Poppins 是什麼字體？

Poppins 是 Google Fonts 提供的 現代與優雅的無襯線字體(Sans-serif)。
但是 因為不支援韓文、日文和中文等，需另行設置其他字體作為備用。

2. 直接使用 Google Fonts (CDN 方式)

最簡單的方法是在 <head> 中放入 Google Fonts 的鏈接。

<!-- base.html -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Noto+Sans+KR&family=Noto+Sans+JP&display=swap" rel="stylesheet">

body {
    font-family: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}
❗ 注意：在中國等部分國家可能會被封鎖 Google Fonts 的訪問

在這種情況下，字體將無法加載，導致 文字顯示不正常或被替換為基本系統字體。
為了解決這個問題，建議使用下面的 本地安裝方式。

3. 本地字體安裝及使用方法

📁 專案目錄結構示例

your_project/
├── static/
│   ├── fonts/
│   │   ├── poppins/
│   │   │   ├── Poppins-Regular.woff2
│   │   │   └── Poppins-Bold.woff2
│   │   └── noto/
│   │       ├── NotoSansKR-Regular.woff2
│   │       └── NotoSansJP-Regular.woff2
│   └── css/
│       └── fonts.css

🎨 fonts.css 示例

/* Poppins */
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/poppins/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/poppins/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
}

/* Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/static/fonts/noto/NotoSansKR-Regular.woff2') format('woff2');
}

/* Noto Sans JP */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/static/fonts/noto/NotoSansJP-Regular.woff2') format('woff2');
}

📌 CSS 應用示例

:root {
  --font-default: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}

body {
  font-family: var(--font-default);
}

4. sans-serif 需要特殊安裝嗎？

✅ 通用 Ubuntu 環境

  • sans-serif 不是 字體名稱，而是 字體家族（字型系列，generic font family），實際上會自動替換為系統擁有的 無襯線系列基本字體。 (例如：Arial、Helvetica、Noto Sans、DejaVu Sans等，依系統而異。)
  • 也就是說，使用 font-family: sans-serif;，瀏覽器會尋找 該操作系統的基本無襯線字體。
  • 大多數系統預裝有 DejaVu Sans、Liberation Sans、Noto Sans 等。
  • 因此僅設置 sans-serif 也能自動映射並且顯示正常

❌ Docker 容器環境

許多容器（特別是 python:3.x-slim、debian-slim）沒有基本字體
→ 可能會出現韓文、日文甚至英文字母都顯示為方框（□）的情況

5. 在 Docker 環境中安裝字體

🐳 Dockerfile 示例

FROM python:3.12-slim

RUN apt update && apt install -y \
    fonts-dejavu \
    fonts-noto \
    fonts-noto-cjk \
    && rm -rf /var/lib/apt/lists/*
  • fonts-dejavu: 用於 sans-serif 的基本映射
  • fonts-noto: 支援全球語言
  • fonts-noto-cjk: 支援中日韓字符

6. 結論

項目 內容
Poppins 僅支持拉丁字符，不支持韓文和日文
Google Fonts 方便，但在中國等地會被封鎖
本地安裝 最穩定的方式
sans-serif 系統預設字型，在 Docker 中可能不會安裝
Docker 支援 需要安裝 fonts-dejavu、fonts-noto、fonts-noto-cjk

📦 額外：推薦備用字體設置

font-family: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  • Apple SD Gothic Neo: macOS
  • Malgun Gothic: Windows
  • 系統特定的好看韓文字體備用

🙋 有幫助嗎？

  • 請通過評論或電子郵件給我們反饋。
  • 這個博客正在因為你的關注而持續成長。