Het gebruik van stijlvolle lettertypen tijdens webontwikkeling verbetert de gebruikerservaring aanzienlijk.
In dit artikel bespreken we hoe we het populaire weblettertype Poppins in een Django-project kunnen gebruiken,
alsook hoe we het systeemlettertype sans-serif betrouwbaar in containeromgevingen kunnen gebruiken.

Django lettertypen en Docker compatibiliteit visueel

1. Wat voor lettertype is Poppins?

Poppins is een modern en stijlvol sans-serif lettertype dat door Google Fonts wordt aangeboden.
Houd er rekening mee dat het geen ondersteuning biedt voor onder andere Koreaans, Japans en Chinees, dus je moet een ander lettertype als fallback instellen.

2. Google Fonts direct gebruiken (CDN-methode)

De eenvoudigste manier is om de link van Google Fonts in <head> te plaatsen.

<!-- 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;
}
❗ Let op: In sommige landen, zoals China, kan de toegang tot Google Fonts geblokkeerd zijn.

In dit geval kan het lettertype niet worden geladen, waardoor de tekst vervormd of vervangen door het standaard systeemlettertype kan worden.
Om dit probleem op te lossen, is het aan te raden om de lokale installatie methode te gebruiken.

3. Hoe lokale lettertypen te installeren en te gebruiken

📁 Voorbeeld van projectdirectorystructuur

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

🎨 Voorbeeld van 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');
}

📌 Voorbeeld van CSS-toepassing

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

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

4. Is het nodig om sans-serif apart te installeren?

✅ Gewone Ubuntu omgeving

  • sans-serif is in plaats van een lettertype naam meer een lettertype familie (generic font family), en wordt automatisch vervangen door het basis sans-serif lettertype dat het systeem heeft. (Bijv.: Arial, Helvetica, Noto Sans, DejaVu Sans, afhankelijk van het systeem.)
  • Dat wil zeggen, als je font-family: sans-serif; gebruikt, zoekt de browser naar het standaard sans-serif lettertype van dat OS.
  • Meestal zijn DejaVu Sans, Liberation Sans, Noto Sans standaard geïnstalleerd.
  • Daarom is het voldoende om alleen sans-serif in te stellen, omdat het automatisch goed wordt weergegeven.

❌ Docker containeromgeving

Veel containers (vooral python:3.x-slim, debian-slim) hebben helemaal geen standaardlettertypen
→ waardoor zelfs Koreaans, Japans en Engels kunnen worden weergegeven als vierkant (□).

5. Lettertypen installeren in een Docker-omgeving

🐳 Voorbeeld van 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: voor de standaard mapping van sans-serif
  • fonts-noto: voor ondersteuning van wereldwijde talen
  • fonts-noto-cjk: biedt ondersteuning voor China, Japan en Korea

6. Conclusie

Item Inhoud
Poppins Alleen voor Latijnse letters, geen ondersteuning voor Koreaans/Japans
Google Fonts Handig maar geblokkeerd in landen zoals China
Lokale installatie De meest betrouwbare manier
sans-serif Systeemstandaardlettertype, kan in Docker ontbreken
Docker ondersteuning Instellingen voor fonts-dejavu, fonts-noto, fonts-noto-cjk zijn nodig

📦 Bonus: Aanbevolen fallback-lettertype instellingen

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
  • Aanbevolen mooie Koreaanse lettertypen als fallback

🙋 Was dit nuttig?

  • Laat ons je feedback weten via reacties of e-mail.
  • Deze blog groeit dankzij jouw interesse.