# Fonts Bundle
> Готовые блоки для пар шрифтов Google Fonts (веса, subset) + system-стек. Триггеры: «подключи шрифты», «пара шрифтов».
- Skill: `jhamidun/fonts-bundle` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jhamidun/fonts-bundle`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/fonts-bundle/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/fonts-bundle
---
# Fonts bundle
Готовые сниппеты. Скопируй в `` нужный блок. Все — с `display=swap`, минимальными весами и Cyrillic-subset (где применимо).
## System stack (без подключений)
```css
:root {
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { font-family: var(--font-sans); }
```
Самый быстрый — нет загрузок. Подходит когда не критичен бренд.
## Inter (sans, нейтральный)
```html
```
```css
body { font-family: 'Inter', system-ui, sans-serif; }
```
⚠ В `frontend-design`-памятке Inter помечен как «overused». Используй только когда нет вариантов.
## Fraunces + Inter (serif display + sans body)
```html
```
```css
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }
```
Editorial-направление. Хорошо для лендингов, питчей.
## Bricolage Grotesque + Inter
```html
```
Для современных продуктов с мягкой типографикой.
## Space Grotesk + Space Mono
```html
```
Для tech / dev tools / brutalist.
## DM Serif Display + DM Sans
```html
```
Бесплатная alternativa Tiempos. Высокий контраст, dramatic.
## JetBrains Mono (только моно)
```html
```
Для кода, dev tools.
## Outfit (один шрифт на всё)
```html
```
Геометрический sans, если нужен один на display + body.
## Кириллица
Не все Google Fonts поддерживают Cyrillic. Проверенные с кириллицей:
- Inter ✅
- DM Sans / DM Serif Display ✅
- Bricolage Grotesque ✅
- Outfit ❌
- Fraunces ❌
- Space Grotesk / Space Mono ✅
Для не-поддерживаемых добавь fallback:
```css
font-family: 'Outfit', 'Inter', system-ui, sans-serif;
```
## Правила
### 1. Не больше 4 файлов
Каждый `` к Google Fonts — отдельный запрос. Если просишь 8 весов — это 8 запросов.
### 2. `display=swap`
Без него на медленной сети текст невидим до загрузки шрифта. Со swap — рисуется фолбеком, потом подменяется.
### 3. `preconnect` к gstatic
Снимает 100-300мс с первой загрузки.
### 4. `font-weight` ровно те, что нужны
Для тела + одного хедера обычно хватает 400 + 600. Не качай 100, 200, 300, 400, 500, 600, 700, 800, 900 «на всякий случай».
### 5. Для лендинга — preload основного шрифта
```html
```
Ускоряет LCP. Имя файла нужно вытащить из Network-таба.
### 6. Self-hosting (production)
Для финальных проектов — скачай `.woff2` с `gwfh.mranftl.com`, положи в `/fonts/`, задай `@font-face`. Снимает зависимость от Google.
```css
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/inter.woff2') format('woff2');
}
```
## Лицензии
- **Все Google Fonts** — Open Font License (OFL) или Apache. Свободны.
- **Bunny Fonts** (`fonts.bunny.net`) — drop-in замена Google без трекинга.
- **Adobe Fonts / Typekit** — нужна подписка, не для свободной раздачи.
- **Commercial foundry fonts** (Söhne, GT America, Tiempos) — лицензия за $$. Не подключай если нет у клиента.
## Антипаттерны
- ❌ `` без `display=swap` — FOIT (flash of invisible text).
- ❌ Тащить Inter для одного места, где хватило бы system-ui.
- ❌ Пять разных шрифтов на странице.
- ❌ Подключить Google Fonts и параллельно `@font-face` для того же шрифта.