Приветствую вас. Сегодня я хотел бы еще раз подробно остановится на том, как сделать в css подключение шрифтов, которые вам нужны для вашего проекта. Я вам покажу как пользоваться Google Fonts и быстро подключать нужные шрифты к сайту, а также немного о другом способе, чуть более сложном.
Использование Google Fonts
Итак, вбиваем эти слова в поисковик и переходим на страницу, где собрана огромная коллекция шрифтов. Тут сбоку будет очень много фильтров для того, чтобы выбрать то что нужно максимально быстро. В частности, можно отключить показ какого-то из пяти основных видов шрифтов (по умолчанию выбраны все), отфильтровать по толщине и т.д. Поле “Script” позволяет выбрать язык, который поддерживается для вывода символов выбранным шрифтом.
Учитывайте, что если вы выбираете исключительно латинский шрифт, то кириллические символы в нем не будут отображаться так, как надо. Некоторые шрифты универсальные, то есть поддерживают оба набора символов, а группа с приставкой Extended также поддерживает вывод дополнительных знаков.
После того, как вы выбрали понравившийся шрифт, можно добавить его в коллекцию, чтобы в будущем использовать еще и не потерять, а можно сразу нажать кнопку “Quick use” (быстрое использование).
На этой странице Гугл предложит вам выбрать, какие начертания вам нужны. Обычно не стоит выбирать больше 1-2 начертаний. Справа будет счетчик, который покажет, насколько увеличиться загрузка страницы при подключении указанного шрифта. При желании вы сами сможете изменить начертание и жирность с помощью css-свойств.
Чуть ниже вы можете выбрать, какие языки нужно поддерживать. Наконец, после этого вам нужно будет подключить к вашему сайту выбранный шрифт. Сделать это не так и сложно, Гугл предлагает нам три варианта, я рекомендую использовать первый или второй.
Первый способ заключается в том, что вы с помощью тега link ссылаетесь на нужную страницу, где браузер и возьмет нужные стили и файлы.
Второй способ – импорт в таблицу стилей с помощью конструкуции @import. Самим вам ничего писать не придется, Google Fonts сам генерирует код, который нужно вставить. Я рекомендую вам его поместить в начало таблицы стилей.
Использование на сайте
Хорошо, допустим, что шрифт мы подключили, как же проверить его работу? Нужно попробовать задать его какому-нибудь текстовому элементу. Например, заголовку, чтобы лучше было видно разницу. И тут Гугл нам подсказывает готовый код, просто берем его и копируем. Единственное, что вам нужно сделать, это указать селектор, для которого будет применяться это свойство. Например:
H3{
Font-family: ‘Roboto’, sans-serif;
}
Чтобы все сработало, предварительно нужно подключить шрифт Roboto к сайту любым из вышеперечисленных способов. Вторым параметром через запятую указывается семейство. Оно будет использовано, если шрифт по каким-то причинам не загрузится, тогда браузер сам поставит другой. Но с Google Fonts, как правило, проблем не будет.
Как подключить другим способом
Нужно сказать, что есть другой способ подключения, при котором скорость загрузки будет быстрее, но придется больше помучиться. Он заключается в том, чтобы создать на своем сайте директорию fonts, куда нужно положить папку со всеми необходимыми файлами для каждого конкретного шрифта, после чего подключить его через конструкцию @font-family. Я не буду писать об этом второй раз, читайте об этом по этой ссылке, там я все подробно показываю. Ну а на этом у меня все.