Официальный сайт

Как подключить и настроить шрифт на сайте с помощью 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.

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

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

Цветовая палитра и стили оформления сайта
PreviousКак настроить модальное окном "Подтверждение обмена"?NextКак вывести QR-Код при оплате заявки?

Last updated

Was this helpful?