Типографика

Ubuntu для заголовков и выделений, Nunito Sans для основного текста.

Связка шрифтов

Роль	Шрифт	CSS-переменная
Основной текст и интерфейс	Nunito Sans	`--font-nunito`
Заголовки, H1, выделения	Ubuntu	`--font-ubuntu`

Шрифты подключаются через next/font/google в app/layout.tsx — файлы self-hosted, внешних запросов к Google Fonts в рантайме нет.

Оба шрифта содержат кириллический набор (cyrillic, cyrillic-ext), поэтому дополнительные гарнитуры-компаньоны не требуются:

app/global.css

--font-sans: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-ubuntu), var(--font-nunito), ui-sans-serif, sans-serif;

Системные шрифты в конце стека — страховка на случай, если веб-шрифт не загрузился.

В Ubuntu существуют только начертания 300, 400, 500 и 700. Запрос промежуточного веса (например, font-semibold, то есть 600) заставит браузер синтезировать начертание — буквы получатся искусственно утолщёнными. Nunito Sans переменный, для него ограничений нет.

app/layout.tsx

const ubuntu = Ubuntu({
  subsets: ['latin', 'latin-ext', 'cyrillic'],
  weight: ['400', '500', '700'],
  display: 'swap',
  variable: '--font-ubuntu',
});

Список доступных весов зафиксирован в lib/brand.ts как brandFonts.displayWeights.

Применение

h1, h2, h3 получают display-гарнитуру автоматически через app/global.css. Для остальных элементов используйте утилиты:

Класс	Результат
`font-display`	Ubuntu
`font-sans`	Nunito Sans (значение по умолчанию для `body`)
`re-display`	Ubuntu с начертанием 700 — для крупных акцентных надписей вне заголовков

<h2 className="font-display text-2xl font-medium tracking-tight">
  Продукты
</h2>

Обратите внимание на font-medium (500), а не font-semibold (600) — по причине, описанной выше.

Шкала заголовков

Элемент	Начертание	Трекинг
`h1`, `.re-display`	700	`-0.01em`
`h2`, `h3`	500	`-0.01em`
Заголовок страницы документации	700	`-0.02em`
Основной текст	400	обычный

Замена шрифтов

Проверить наличие кириллицы

Прежде чем выбрать гарнитуру, убедитесь, что в Google Fonts у неё есть набор cyrillic:

node -e "const d=require('next/dist/compiled/@next/font/dist/google/font-data.json'); console.log(d['Ubuntu'])"

Если набора нет, добавьте кириллическую гарнитуру следующим элементом стека — браузер подбирает шрифт отдельно для каждого глифа.

Подключить гарнитуры

app/layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin', 'latin-ext', 'cyrillic'],
  display: 'swap',
  variable: '--font-inter',
});

Добавьте переменную шрифта в className элемента <html>. Для непеременных гарнитур укажите массив weight.

Обновить стек и начертания

app/global.css

@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

Проверьте, что веса заголовков в app/global.css и классы font-* в компонентах входят в набор, доступный у новой гарнитуры.

Обновить константы

lib/brand.ts — brandFonts.body, brandFonts.display и brandFonts.displayWeights — единственный источник названий гарнитур для документации и вспомогательных скриптов.