L'utilisation de polices élégantes lors du développement web améliore considérablement l'expérience utilisateur.
Dans cet article, nous explorerons comment utiliser la police connue Poppins dans un projet Django et,
comment appliquer la police système par défaut sans-serif de manière stable même dans des environnements de conteneur.

Visualisation de la compatibilité entre Django et Docker

1. Qu'est-ce que la police Poppins ?

Poppins est une police sans-serif moderne et élégante proposée par Google Fonts.
Cependant, elle ne prend pas en charge les caractères coréens, japonais, chinois, etc., il est donc nécessaire de définir d'autres polices comme alternatives.

2. Utilisation directe de Google Fonts (méthode CDN)

La méthode la plus simple consiste à insérer le lien de Google Fonts dans <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;
}
❗ Attention : L'accès à Google Fonts peut être bloqué dans certains pays comme la Chine

Dans ce cas, la police ne se chargera pas, et les caractères pourront être corrompus ou remplacés par la police système par défaut.
Il est donc recommandé d'utiliser la méthode d'installation locale ci-dessous pour résoudre ce problème.

3. Méthode d'installation et d'utilisation de polices locales

📁 Exemples de structure de répertoire de projet

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

🎨 Exemple de 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');
}

📌 Exemple d'application CSS

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

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

4. Faut-il installer sans-serif séparément ?

✅ Environnement Ubuntu standard

  • sans-serif est plus une famille de polices (générique) qu'un nom de police spécifique, et sera automatiquement remplacé par la police de base sans-serif disponible sur le système. (Ex : Arial, Helvetica, Noto Sans, DejaVu Sans, etc. cela varie en fonction du système.)
  • En d'autres termes, en utilisant font-family: sans-serif;, le navigateur cherchera à afficher la police sans-serif par défaut de l'OS.
  • En général, DejaVu Sans, Liberation Sans, Noto Sans sont préinstallées.
  • Par conséquent, en définissant uniquement sans-serif, la police sera automatiquement mappée et s'affichera correctement.

❌ Environnement de conteneur Docker

Beaucoup de conteneurs (en particulier python:3.x-slim, debian-slim) n'ont aucune police de base.
→ Par conséquent, même l'anglais pourrait apparaître sous forme de carrés (□).

5. Installation des polices dans l'environnement Docker

🐳 Exemple de 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: pour le mappage de base sans-serif
  • fonts-noto: pour le support des langues du monde entier
  • fonts-noto-cjk: support des caractères chinois, japonais et coréens

6. Conclusion

Élément Détails
Poppins Uniquement pour les caractères latins, ne supporte pas le coréen ou le japonais
Google Fonts Facile à utiliser mais bloqué en Chine et ailleurs
Installation locale La méthode la plus stable
sans-serif Police par défaut du système, peut ne pas être installée dans Docker
Support Docker Besoin d'installer fonts-dejavu, fonts-noto, fonts-noto-cjk

📦 Bonus : Configuration recommandée pour des polices de secours

font-family: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  • Apple SD Gothic Neo: pour macOS
  • Malgun Gothic: pour Windows
  • Polices de secours coréennes esthétiques selon le système

🙋 Avez-vous trouvé cela utile ?

  • Merci de nous faire part de vos retours par commentaire ou e-mail.
  • Ce blog continue de croître grâce à votre intérêt.