Как подключить и настроить шрифт на сайте с помощью Google Fonts

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

Как это работает

Google Fonts загружается с помощью CSS-правила @import или элемента <link>. Сайт автоматически загружает файлы шрифтов с серверов Google и отображает текст на вашем сайте указанным шрифтом.

---

Подробная пошаговая инструкция

1

Переход на сайт Google Fonts

Откройте сайт Google Fonts.

2

Выбор шрифта

• Используйте фильтры и поиск, чтобы найти подходящий шрифт.

• Нажмите на выбранный шрифт (например, Roboto).

3

Получение кода для вставки

Нажмите на кнопку «Get font» справа вверху.

Выберите «Get embed code».

4

Копирование CSS-кода

В открывшемся окне перейдите на вкладку «Web», затем выберите «@import».

Скопируйте предложенный код:

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

5

Вставка кода шрифта в проект

• Откройте файл /public/static/custom-theme.css вашего сайта.

• Вставьте скопированный код @import в самое начало файла.

6

Настройка шрифта

Найдите CSS-переменную --default-font-family и замените её значение на название выбранного шрифта:

--default-font-family: 'Roboto', sans-serif !important;

7

Сохранение изменений и проверка

• Сохраните изменения в файле /public/static/custom-theme.css.

• Очистите кэш браузера и откройте сайт.

• Убедитесь, что шрифт загружается и отображается правильно.

Цветовая палитра и стили оформления сайта