Использование современного шрифта при веб-разработке значительно улучшает пользовательский опыт.
В этой статье мы рассмотрим, как использовать популярный веб-шрифт Poppins в проекте Django,
а также как надежно применять системный шрифт sans-serif в контейнерной среде.

Django fonts and Docker compatibility visual

1. Что такое Poppins?

Poppins — это современный и стильный шрифт без засечек (Sans-serif), предоставляемый Google Fonts.
Однако он не поддерживает корейский, японский и китайский языки, поэтому вам нужно будет настроить запасной шрифт.

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; браузер найдет основной шрифт без засечек для данной ОС и отобразит его.
  • В большинстве случаев установлены 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
Поддержка Docker Необходима установка fonts-dejavu, fonts-noto, fonts-noto-cjk

📦 Бонус: Рекомендуемое обеспечение резервного шрифта

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
  • Резервный шрифт для красивых корейских символов в зависимости от системы

🙋 Вам помогло?

  • Пожалуйста, дайте обратную связь через комментарии или по электронной почте.
  • Этот блог развивается благодаря вашему интересу.