DjangoウェブプロジェクトでPoppinsおよびsans-serifフォントを安定的に適用する方法

ウェブ開発において洗練されたフォントを使用することで、ユーザーエクスペリエンスが大幅に向上します。
この記事では、代表的なウェブフォントであるPoppinsをDjangoプロジェクトで使用する方法と、
システムの基本フォントであるsans-serifをコンテナ環境でも安定的に使用する方法をまとめます。

Django fonts and Docker compatibility visual

1. Poppinsはどんなフォントか？

PoppinsはGoogle Fontsで提供されるモダンで洗練されたサンセリフ（Sans-serif）フォントです。
しかし、韓国語、日本語、中国語などはサポートしていないため、他のフォントをフォールバックで設定する必要があります。

2. Google Fontsを直接使用する（CDN方式）

最も簡単な方法は、Google Fontsのリンクを<head>に挿入することです。

<!-- 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;を使用すると、ブラウザがそのOSの基本サンセリフフォントを探して表示します。
ほとんどの場合、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
システムごとの美しい韓国語フォントのフォールバック

🙋 お助けになりましたか？

コメントやメールでフィードバックしてください。
このブログは皆さんの関心によって成長し続けています。