Using elegant fonts in web development greatly enhances the user experience.
In this post, I will outline how to use the representative web font Poppins in a Django project and how to reliably use the system default font sans-serif even in a container environment.

Django fonts and Docker compatibility visual

1. What is the Poppins Font?

Poppins is a modern and stylish sans-serif font provided by Google Fonts.
However, it does not support Korean, Japanese, or Chinese, so you need to set other fonts as fallback as well.

2. Using Google Fonts Directly (CDN Method)

The simplest way is to include the Google Fonts link in your <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;
}
❗ Note: Access to Google Fonts may be blocked in some countries, such as China.

In this case, fonts may not load, resulting in garbled text or fallback to the basic system font.
To resolve this issue, it is better to use the local installation method described below.

3. How to Install and Use Local Fonts

πŸ“ Example of Project Directory Structure

your_project/
β”œβ”€β”€ static/
β”‚   β”œβ”€β”€ fonts/
β”‚   β”‚   β”œβ”€β”€ poppins/
β”‚   β”‚   β”‚   β”œβ”€β”€ Poppins-Regular.woff2
β”‚   β”‚   β”‚   └── Poppins-Bold.woff2
β”‚   β”‚   └── noto/
β”‚   β”‚       β”œβ”€β”€ NotoSansKR-Regular.woff2
β”‚   β”‚       └── NotoSansJP-Regular.woff2
β”‚   └── css/
β”‚       └── fonts.css

🎨 Example of 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');
}

πŸ“Œ Example of CSS Application

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

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

4. Do I Need to Install sans-serif Separately?

βœ… General Ubuntu Environment

  • sans-serif is more of a generic font family rather than a font name, and it is automatically replaced with the default sans-serif font that the system has. (For example: Arial, Helvetica, Noto Sans, DejaVu Sans, etc., depending on the system.)
  • In other words, using font-family: sans-serif; allows the browser to display the default sans-serif font from that OS.
  • Most systems have DejaVu Sans, Liberation Sans, Noto Sans installed by default.
  • So, using only sans-serif will automatically map and display correctly.

❌ Docker Container Environment

Many containers (especially python:3.x-slim, debian-slim) do not have any default fonts installed.
β†’ Korean, Japanese, and even English may appear as boxes (β–‘).

5. Installing Fonts in Docker Environment

🐳 Example of 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: for default sans-serif mapping
  • fonts-noto: supports all languages worldwide
  • fonts-noto-cjk: supports Korean, Chinese, and Japanese characters

6. Conclusion

Item Details
Poppins Latin character only, does not support Korean or Japanese
Google Fonts Convenient but may be blocked in China and other regions
Local Installation The most stable method
sans-serif System default font, likely uninstalled in Docker
Docker Compatibility Need to install fonts-dejavu, fonts-noto, fonts-noto-cjk

πŸ“¦ Bonus: Recommended Fallback Font Settings

font-family: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  • Apple SD Gothic Neo: for macOS
  • Malgun Gothic: for Windows
  • Pretty Korean font fallback for different systems

πŸ™‹ Did This Help?

  • Feel free to give feedback via comments or email.
  • This blog continues to grow with your interest.