Выбираем и устанавливаем любые шрифты для сайта

6
67

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

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


resume professor

Раньше в качестве альтернативы многие веб-мастера использовали 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 и его партнеров, тогда посетите вот эту страницу.

6 КОММЕНТАРИИ

  1. Решение то неплохое, но займёт время для реализации. Я с первым сайтом своим решил всё просто: добавил готовый плагин шрифтов. И опять же, смотря какая у вас cms. С плагином долговато сайт грузится. А вот так как в статье написано, всё руки не доходят попробовать этот вариант.

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

    Как бы там не было, всё равно сэнкью за информацию, автор.

  2. Блин! Наконец то нашел толковую информацию о том, как установить уникальный шрифт для своего игрового форума. Уже надоело читать о том, что лучше использовать стандартные шрифты типа Arial и так далее и тому подобное… Отдельное спасибо автору за Google Fonts! Не знал, про него. Уже давно хочу сменить унылый шрифт сообщений своего форума на что-нибудь более стильное и в тоже время читабельное.

  3. Мне вообще очень нравятся блоги с нестандартными и уникальными дизайнами. Но что делать новичкам, у которых нет свободных денег на разработку дизайна? Просто использовать интересный шрифт, который будет отличать ваш ресурс от других. Спасибо за полезную информацию о том, как менять шрифты в коде CSS. Полезная вещь, беру себе на заметку, поскольку давно задумываюсь об изменении шрифта для одного раздела своего сайта.

  4. С недавнего времени веду блог на блогспоте (blogspot), первоначально мне просто ходелось делиться с народом информацией, но со временем это занятие меня изрядно затянуло, появилось порядочное количество ПЧ и я занялась украшательством своего детища. Очень интересно будет попробовать в работе нетривиальные шрифты, конечно в данном случае лучшим вариантом будет выступать Google Fonts. Анализируя посещающую аудиторию, а именно просмотры страницы по браузерам, я натолкнулась на варианты Safari, CriOS и UCBrowser, и если о Safari я имею некоторое представление то остальное для меня темный лес чудес. Как Вы думаете, будет ли осуществляться правильное прочтение шрифтов в этих браузерах?

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь