Die Verwendung eleganter Schriftarten verbessert das Benutzererlebnis erheblich bei der Webentwicklung.
In diesem Artikel erkläre ich, wie man die bekannte Webschriftart Poppins in einem Django-Projekt verwendet und,
wie man die systemeigenen Schriftarten sans-serif auch in Container-Umgebungen zuverlässig einsetzt.

Django fonts and Docker compatibility visual

1. Was ist die Schriftart Poppins?

Poppins ist eine moderne und elegante Sans-Serif-Schriftart, die von Google Fonts bereitgestellt wird.
Allerdings unterstützt sie keine koreanischen, japanischen oder chinesischen Zeichen, weshalb andere Schriftarten als Fallback eingestellt werden müssen.

2. Google Fonts direkt verwenden (CDN-Methode)

Die einfachste Methode besteht darin, den Link zu Google Fonts in den <head> einzufügen.

<!-- 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;
}
❗ Achtung: In einigen Ländern, wie z.B. China, kann der Zugriff auf Google Fonts blockiert sein.

In diesem Fall wird die Schriftart möglicherweise nicht geladen, was zu verzerrten Zeichen oder der Verwendung der standardmäßigen Systemschriftart führen kann.
Um dieses Problem zu lösen, empfiehlt es sich, die lokale Installationsmethode zu verwenden.

3. Lokale Schriftarten installieren und verwenden

📁 Beispiel für die Projektverzeichnisstruktur

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

🎨 Beispiel für 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');
}

📌 Beispiel für die CSS-Anwendung

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

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

4. Ist die Installation von sans-serif nötig?

✅ Normale Ubuntu-Umgebung

  • sans-serif ist eher eine Schriftfamilie (generische Schriftfamilie) als ein Schriftartname, und wird tatsächlich automatisch durch die Standard-Sans-Serif-Schriftart des Systems ersetzt. (z.B.: Arial, Helvetica, Noto Sans, DejaVu Sans, etc. wird je nach System unterschiedlich gemappt.)
  • Das heißt, wenn Sie font-family: sans-serif; verwenden, sucht der Browser nach der Standard-Sans-Serif-Schriftart des jeweiligen OS und zeigt diese an.
  • In der Regel sind DejaVu Sans, Liberation Sans, Noto Sans bereits standardmäßig installiert.
  • Sie können also sans-serif angeben, und es wird automatisch gut angezeigt.

❌ Docker-Container-Umgebung

Viele Container (insbesondere python:3.x-slim, debian-slim) haben keine Standard-Schriftarten.
→ Koreanisch, Japanisch und sogar Englisch können als Kästchen (□) angezeigt werden.

5. Schriftarten in Docker-Umgebungen installieren

🐳 Beispiel für 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: für standardmäßige sans-serif-Zuordnung
  • fonts-noto: Unterstützung für eine Vielzahl von Sprachen
  • fonts-noto-cjk: Unterstützung für chinesische, koreanische und japanische Schriftzeichen

6. Fazit

Element Inhalt
Poppins Nur für lateinische Zeichen, unterstützt kein Koreanisch oder Japanisch
Google Fonts Praktisch, aber in Ländern wie China blockiert
Lokale Installation Die stabilste Methode
sans-serif Standard-Systemschriftart, möglicherweise in Docker nicht installiert
Docker-Unterstützung Installation von fonts-dejavu, fonts-noto, fonts-noto-cjk erforderlich

📦 Bonus: Empfohlene Fallback-Schriftart-Einstellungen

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
  • Schöne koreanische Schriftarten als Fallback je nach System

🙋 War das hilfreich?

  • Bitte hinterlassen Sie Feedback in den Kommentaren oder per E-Mail.
  • Dieser Blog wächst dank Ihres Interesses weiter.