Подключаем Google Fonts к сайту

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

Стандартные шрифты, такие как: Arial, Tahoma, Verdana, порядком уже поднадоели в использовании, хотя бывает, что они только кстати при своей скучности.

Не знаю когда именно, т.к. постоянно пользуюсь и видимо пропустил, но Google Fonts недавно предстал в новом виде, которое достаточно кардинально отличается от старой версии.

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

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

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

googlefonts02

Выбираем для себя нужную модификацию данного шрифта и кликаем на плюсик в кружке. После чего появится сообщение внизу экрана браузера, что шрифт добавлен в вашу коллекцию. Кликаем по данному сообщению, после чего появляется всплывающее окно с дополнительными настройками выбранного шрифта для последующего использования.

googlefonts03

По умолчанию сразу же предлагается код для использования в HTML и пример использования в CSS:

для тега head:
<link href=’https://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’>

для css:
font-family: ‘Roboto’, sans-serif;

В данном всплывающем окне имеется дополнительная вкладка CUSTOMIZE, в которой можно выбрать расширенные параметры для шрифта, например, поддержку кириллицы, жирного начертания и т.д. При этом в правом верхнем углу Google показывает на сколько ухудшится скорость загрузки страницы (Load Time) при тех или иных параметрах шрифта. Соответственно, после всех настроек шрифта код тега LINK поменяется автоматически при выборе дополнительных параметров.

Всё достаточно просто и близко к совершенству))

Просмотров: 16 084

Related Posts

Leave a comment

Hey, so you decided to leave a comment! That's great. Just fill in the required fields and hit submit. Note that your comment will need to be reviewed before its published.