Просмотров: 4 736

Как добавить красивые нестандартные шрифты от Гугл (google) на свой сайт.

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

Подробнее об этих шрифтах можно почитать здесь:

//webgyry.info/fonts-css-base-shrift

Но, что делать, если вы хотели бы использовать какой-либо нестандартный шрифт на своем сайте? Есть большая вероятность того, что на компьютере человека, который будет просматривать ваш сайт подобный шрифт не будет установлен и у него корректно не отобразится.

Современные сайты и современные способы их верстки позволяют без проблем использовать нестандартные шрифты. Сайты с нестандартными шрифтами смотрятся очень современно и красиво.

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

Шаг 1. Переходим на сайт Google Fonts

https://www.google.com/fonts

2016-02-07 13-52-23 Google Fonts – Yandex

В разделе Script обязательно выбираем, что нам нужны шрифты, которые поддерживают кириллицу. Жмем «Add to Collection» и затем «Use».

Шаг 2. Выбираем начертание и полужирность шрифта, которые мы будем использовать на страницах сайта.

2016-02-07 13-54-57 Google Fonts – Yandex

Учтите, чем больше возможных начертаний вы выберите, тем дольше будут загружаться ваши веб-страницы.

Шаг 3. Спускаемся ниже и копируем код, который нужно будет вставить на все страницы вашего сайта между тегами <head> и </head>

2016-02-07 13-56-53 Google Fonts – Yandex

Вот и вся премудрость.

Теперь для элементов, для которых нужно будет использовать нестандартный шрифт, нужно присвоить свойство font-family с соответствующим значением:

2016-02-07 14-07-40 Google Fonts – Yandex

Подробнее о свойстве font-family можно почитать здесь:

//webgyry.info/css-font-family

Успехов! Пусть с новыми шрифтами ваши сайты добиваются новых результатов.