Использование шрифта Google Roboto на сайте: руководство

Быстрый ответ

Чтобы встроить шрифт Roboto от Google, добавьте следующий тег <link> в HTML:

HTML

Скопировать код

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

В CSS укажите:

CSS

Скопировать код

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

Так, вы активируете Roboto. Используя wght@400;700, вы получите обычное и полужирное начертание. Переходим к кодированию!

Выбор и применение вариаций шрифта Roboto

Добавление множественных начертаний шрифта Roboto

Шрифт Roboto доступен в разных вариациях начертания и стиля. Выберите, что нужно:

HTML

Скопировать код

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;900&display=swap" rel="stylesheet">

Это подключит начертание thin, regular, bold и black. Разнообразие — залог яркости проекта!

Внедрение элемента Roboto в проект

Храните копию Roboto на своём сервере, чтобы улучшить контроль и, возможно, скорость загрузки. Вот как это можно сделать:

CSS

Скопировать код

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/fonts/Roboto.woff2) format('woff2');
}
body {
  font-family: 'Roboto', sans-serif;
}

Так шрифт будет буквально "под рукой". Используйте функцию local() и указывайте путь к файлу в src. Держите все вариации шрифта под контролем!

Знакомство с настройками шрифта Roboto

Работа с @font-face

Ведь мы все стараемся быть эффективными? Правильно выбирайте вариации начертаний, создавайте чёткую структуру каталогов:

CSS

Скопировать код

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url('/fonts/roboto-bold.woff2') format('woff2');
}

Файл шрифта отвечает за каждый @font-face и определяет вес начертаний. В деталях — успех работы.

Устранение проблем с шрифтом Roboto

В мире веба существуют следующие проблемы:

Кроссбраузерная совместимость: Приветствуйте формат .woff2 для новейших браузеров, но также предусмотрите альтернативы для остальных.
Скорость загрузки: Предварительно загружайте шрифты, чтобы вы предотвратили "вспышки незадекорированного текста" (FOUT).
Пересмотр отображения: Важно контролировать качество. Проверяйте на разнообразных устройствах и удостоверьтесь, что файлы шрифта работоспособны.

Усовершенствование удобства с помощью SASS

Часто используете Roboto? Применяйте переменные в SASS:

scss

Скопировать код

$roboto: 'Roboto', sans-serif;
body {
  font-family: $roboto;
}
h1 {
  font-family: $roboto;
  font-weight: 700;
}

Сокращайте дублирование и облегчайте работу с кодом. Вашему будущему "Я" придется это вам благодарить.

Визуализация

Отображение шрифта Roboto как элемента вашего сайта – ключевой пункт:

markup

Скопировать код

Веб-сайт: "Я хочу носить Roboto!"

Сначала подбираем подходящий "наряд":

HTML

Скопировать код

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

Далее демонстрируем уникальный стиль:

CSS

Скопировать код

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

Так, ваш сайт готов показаться на "сцене" в притягательности шрифта Roboto.

Улучшайте производительность сайта за счет частичного применения шрифтов или используйте руководства от Google на GitHub. Реализуйте локальные альтернативы и директиву preload для лучшего UX.

Сильный инструмент стоит на пути Roboto, так что не забывайте о его ответственном использовании:

CSS

Скопировать код

@import url('https://fonts.google.com/css2?family=Roboto:wght@400;700&display=swap');
html {
  font-family: 'Roboto', sans-serif;
}

Полезные материалы

Roboto – Google Fonts – официальный сайт шрифта Roboto от Google.
Погружение в API Google Fonts | Разработчики Google – пошаговое руководство по внедрению Google Fonts в веб-проекты.
Работа с @font-face в CSS | CSS-Tricks – глубокое понимание работы с @font-face для шрифтов.
@font-face – CSS: Каскадные таблицы стилей | MDN – полное руководство по @font-face в CSS.
Применение веб-шрифтов в CSS – учебник по использованию веб-шрифтов в CSS.
Совместимость использования... таблиц для HTML5, CSS3 и другое – таблица совместимости веб-шрифтов в различных браузерах.
Оптимизация производительности Google Fonts — Smashing Magazine – стратегии для ускорения загрузки веб-шрифтов.