Как подобрать и установить нужные шрифты для сайта?

Ченет / Мастерская Web-мастера

13-04-2022Просмотров: 6 006Комментариев: 0

ДАЙДЖЕСТ:

Как подобрать и установить нужные шрифты для сайта?

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

В былые времена нам всегда не хватало богатой, конструктивной и творческой веб-типографики. Мы были зажаты в некоторых рамках при выборе шрифта для сайта, пользуясь ограниченным набором веб-шрифтов из числа так называемых безопасных. Мы все любим Arial и Times, но существуют тысячи других действительно классных шрифтов, а при использовании современных приемов верстки CSS3, уже нет необходимости ограничивать себя в выборе и подключить любой понравившийся шрифт к сайту.

Раньше в качестве альтернативы многие веб-мастера использовали Cufon для достижения большей гибкости при работе с типографикой, например, в случаях когда напрашивался необычный шрифт в какую-либо область на нашей веб-странице. Но способ этот быстро потерял популярность по причине того, что текст вставлялся в виде изображения и, соответственно, не индексировался, не выделялся, увеличивал время загрузки страницы и n.g. Вообще, использовть изображение для текста — очень плохая идея в целом.

Теперь с помощью CSS3 мы можем указать файл шрифта для использования с любым текстом! Достаточно просто загрузить файл шрифта на свой хост и использовать правило @font-face, чтобы задать произвольное имя для вашего шрифта и указать расположение файла. После этого можно просто использовать новое имя шрифта в коде CSS, как вы это обычно и делали.

Вот простой пример:

@font-face {
font-family: 'NewFont';
src: url('/fonts/newfont.otf');
}
p {
font-family: 'NewFont', sans-serif;
}

Выглядит это как идеальное решение, но не все так просто. У такого способа установки шрифта на сайт не универсальная поддержка различными браузерами, иными словами, не кроссбраузерное решение. приведенный выше код должен работать с Google Chrome и Firefox, но не с IE. Но есть такой сайт, который предоставляет бесплатные шрифты вместе с готовым к использованию кодом, который хорошо работает во всех современных браузерах. Скачиваете понравившийся веб-шрифт, затем переходите на страницу с генератором скриптов для поддержки шрифта во всех браузерах и получаете фантастическое по гибкости и универсальное решение!

Но самым популярным решением для интеграции веб-шрифтов на сайт сейчас является… угадайте? Правильно, Google Fonts! Вот краткий гайд по использованию. Вы выбираете понравившийся вам шрифт в сравнительно большой библиотеке данного сервиса (пусть это будет шрифт Abel), затем добавляете в свой CSS файл следующий код:

@import url(http://fonts.googleapis.com/css?family=Abel);
html {
font-family: Abel, sans-serif;
}

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

checheninfo.ru