PrepBro
← Назад к вопросам

Импортировал ли шрифты в CSS

2.2 Middle🔥 181 комментариев
#HTML и CSS#Оптимизация и производительность

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Импорт шрифтов в CSS

Импорт шрифтов — это важный аспект оптимизации и управления типографией веб-приложений. Существует несколько способов добавить шрифты в проект, и каждый имеет свои преимущества и недостатки.

Способы импорта шрифтов

1. @import в CSS файле

Это классический способ загрузки шрифтов через правило @import:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

Преимущества:

  • Простота использования
  • Централизованное управление шрифтами

Недостатки:

  • Дополнительный HTTP запрос
  • Блокирует парсинг CSS (если в начале файла)

2. @font-face для локальных шрифтов

Этот способ используется для загрузки шрифтов, хранящихся на сервере:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2'),
       url('/fonts/custom-font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'CustomFont', sans-serif;
}

Преимущества:

  • Контроль над шрифтом
  • Улучшение производительности (локальные файлы)
  • Поддержка различных форматов (woff2, woff, ttf)

Недостатки:

  • Нужно самостоятельно хранить файлы шрифтов
  • Дополнительные HTTP запросы за каждый файл

3. Теговой <link> в HTML (рекомендуется)

Лучший подход для внешних шрифтов (Google Fonts, Fontsource):

<!-- В <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

/* В CSS файле */
body {
  font-family: 'Inter', sans-serif;
}

Преимущества:

  • Не блокирует парсинг CSS
  • preconnect ускоряет загрузку
  • Работает лучше с кешированием браузера

Недостатки:

  • Нужно добавлять в HTML
  • Зависит от внешних сервисов

4. Next.js: next/font/google (лучший способ)

В Next.js рекомендуется использовать встроенный модуль next/font:

// app/layout.jsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  weight: ['400', '500', '700'],
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return (
    <html lang="ru" className={inter.variable}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

/* globals.css */
body {
  font-family: var(--font-inter), sans-serif;
}

Преимущества:

  • Оптимизирует шрифты автоматически
  • Поддерживает подмножества (кириллица)
  • Предотвращает CLS (Cumulative Layout Shift)
  • Встроенные шрифты при build-time

Недостатки:

  • Только для Next.js
  • Требует правильной конфигурации

5. CSS переменные для масштабируемости

Используйте CSS переменные для управления шрифтами:

:root {
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Georgia', serif;
  --font-mono: 'Courier New', monospace;
}

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

code {
  font-family: var(--font-mono);
}

Оптимизация загрузки

Использование display=swap

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

Это говорит браузеру использовать fallback-шрифт сразу, а затем заменить его при загрузке.

Предзагрузка шрифтов

<link rel="preload" 
      as="font" 
      href="/fonts/inter-400.woff2" 
      type="font/woff2" 
      crossorigin>

Это критично для performance.

Сжатие шрифтов

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

Используйте формат woff2 — он меньше по размеру.

Чеклист при добавлении шрифтов

  1. Выбрать источник: Google Fonts, Fontsource, локальные файлы
  2. Определить наборы символов: Latin, Cyrillic (для русского)
  3. Выбрать начертания: 400, 500, 700 (обычно достаточно)
  4. Оптимизировать загрузку: preconnect, preload, display=swap
  5. Использовать CSS переменные: для гибкости
  6. Проверить на CLS: убедиться, что нет скачков при загрузке
  7. Протестировать на медленном интернете: особенно важно

Пример полной конфигурации (Next.js + Tailwind)

// app/layout.jsx
import { Inter } from 'next/font/google';
import './globals.css';

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

export default function RootLayout({ children }) {
  return (
    <html lang="ru" className={inter.variable}>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

/* globals.css */
@theme inline {
  --font-inter: var(--font-inter);
}

body {
  font-family: var(--font-inter), sans-serif;
  line-height: 1.5;
}

Итоги

  • Для Next.js: используйте next/font/google (лучший вариант)
  • Для других проектов: используйте <link> тег в HTML с preconnect
  • Для локальных шрифтов: @font-face с woff2
  • Оптимизируйте: используйте display=swap и preload
  • Не забывайте: о поддержке кириллицы для русского текста