SSF-O - Единый стандарт для шрифтов (Local, Google Fonts)

Определения

Стандарт SSF-O определяет требования к семантике, доступности и логике работы шрифтов.

Структура и Семантика

Оптимальное подключение для современных фреймворков (Next.js, Nuxt, Gatsby)

В современных средах рекомендуется использовать встроенные инструменты для автоматической оптимизации шрифтов.

Использование встроенного решения в NextJS, обеспечивает автоматическое устранение сдвига макета (CLS), локальную загрузку шрифтов, а также добавление display=swap.

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

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

export { inter };

Применение в Layout:

import { inter } from './fonts';

<html lang="ru" className={inter.variable}> 
  <body>{children}</body>
</html>

Использование в global.css:

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

Оптимальное подключение для “чистого” HTML/CSS/JS и CMS

На статических сайтах или в CMS важно самостоятельно управлять загрузкой шрифтов для обеспечения доступности и корректного отображения.

Локальное подключение (@font-face) - лучший способ:

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2"); 
  font-weight: 400; 
  font-style: normal; 
  font-display: swap;
}

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

Подключение Google Fonts через <link>:

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

Интерактивность и Визуальный отклик

CLS (Cumulative Layout Shift) устраняется за счет локальной загрузки шрифтов и font-display: swap;, и не стоит забывать про запасные шрифты которые обеспечат мгновенное отображение текста до полной загрузки основного шрифта.

Неоптимальные/Устаревшие способы (Избегайте)

Некорректное подключение шрифтов может замедлять страницу и ухудшать взаимодействие.