Как подключить шрифты к сайту: локально и через Google Fonts

Иногда хочется сделать сайт визуально приятнее — и тут на помощь приходят кастомные шрифты. Есть два основных способа: через Google Fonts (проще) и локально (больше контроля, но сложнее). Разберём оба.

1. Подключение через Google Fonts (рекомендуется для большинства)

Это самый простой и надёжный способ. Шрифты хранятся на серверах Google, быстро грузятся и часто уже закэшированы у пользователя.

Шаг 1. Выбери шрифт на fonts.google.com. Например, Montserrat.

Шаг 2. Скопируй код подключения и вставь в <head> HTML:

<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=Montserrat:wght@400;700&display=swap" rel="stylesheet">

Здесь подключаются два начертания: обычное (400) и жирное (700).

Шаг 3. Используй шрифт в CSS:

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

h1 {
  font-weight: 700; /* жирный */
}

💡 Совет: Всегда добавляй запасной шрифт (например, sans-serif) на случай, если кастомный не загрузится.

2. Подключение локальных файлов шрифтов

Подходит, если хочешь полный контроль, работаешь оффлайн или не доверяешь внешним CDN.

Шаг 1. Скачай шрифт в нужных форматах (лучше .woff2 — он самый компактный и поддерживается всеми современными браузерами).

Шаг 2. Положи файлы в папку проекта, например: /fonts/Montserrat-Regular.woff2

Шаг 3. Объяви шрифт через @font-face:

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

Шаг 4. Используй точно так же:

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

⚠️ Распространённые ошибки:

Неправильный путь к файлу (проверяй в DevTools → Network → Fonts)
Забыл указать src: в @font-face
Имя файла не совпадает с реальным (регистр, расширение, дефисы)
Не обновил страницу без кэша (Ctrl+Shift+R)

Вывод

Для блога, лендинга или личного сайта — используй Google Fonts. Это быстро, надёжно и не требует хранения файлов. Локальные шрифты оправданы только в специфических сценариях: внутренние системы, высокая нагрузка на приватность, оффлайн-приложения.

И да — не забывай про font-display: swap (он уже есть в Google Fonts), чтобы текст не «пропадал» во время загрузки шрифта.

Категории

Как подключить шрифты к сайту: локально и через Google Fonts

1. Подключение через Google Fonts (рекомендуется для большинства)

2. Подключение локальных файлов шрифтов

Вывод

Комментарии

Оставить комментарий

Категории

Как подключить шрифты к сайту: локально и через Google Fonts

1. Подключение через Google Fonts (рекомендуется для большинства)

2. Подключение локальных файлов шрифтов

Вывод

Комментарии

Оставить комментарий

Обратная связь