Django 웹 프로젝트에서 Poppins 및 sans-serif 폰트 안정적으로 적용하기

웹 개발 시 세련된 폰트를 사용하면 사용자 경험이 훨씬 좋아집니다.
이 글에서는 대표적인 웹 폰트인 Poppins를 Django 프로젝트에서 사용하는 방법과,
시스템 기본 폰트인 sans-serif를 컨테이너 환경에서도 안정적으로 사용하는 방법을 정리합니다.

Django fonts and Docker compatibility visual

1. Poppins는 어떤 폰트인가?

Poppins는 Google Fonts에서 제공하는 모던하고 세련된 산세리프(Sans-serif) 폰트입니다.
하지만 한글, 일본어, 중국어등은 지원하지 않기 때문에, 다른 폰트를 fallback으로 함께 설정해주어야 합니다.

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 대응	`fonts-dejavu`, `fonts-noto`, `fonts-noto-cjk` 설치 필요

📦 보너스: 추천 fallback font 설정

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
시스템별 예쁜 한글 폰트 fallback

🙋 도움이 되셨다면?

댓글이나 이메일로 피드백 주세요.
이 블로그는 여러분의 관심으로 계속 성장하고 있습니다.