Подключение нестандартных шрифтов на сайте

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

Какие же шрифты можно считать нестандартными?

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

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

Как этого избежать?

На самом деле существует несколько способов, чтобы пользователь мог прочитать нестандартный шрифт.

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

2. Можно, конечно, использовать Javascript, но и этот метод становится все менее актуальным.

3. В последнее время все более популярным становится специализированный сервис для подключения шрифтов от компании Google. Называется он Google Web Fonts. Здесь все очень просто. Заходим на сайт-хранилище, выбираем то, что нам подходит, и подключаем на свой сайт между тегами head.

Сначала выбираем шрифты с кириллицей:

Затем выбираем подходящий шрифт и нажимаем кнопочку «Quick-use»:

На открывшейся странице необходимо задать стиль (жирный, курсив и т.п.), какие знаки вы желаете включить (латинца, кириллица и т.п.), способ подключения (стандартное, через правило @import или через JavaScript) и интеграцию шрифта.

На завершающем этапе подключения вам останется дописать у себя следующую строчку в стилях:

font-family: ‘Lobster’, cursive; (если это шрифт lobster)

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

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

@font-face {

font-family: namefont;/*имя шрифта*/

src: local(«namefont»),/*проверка на наличие шрифта у пользователя*/

url: (font/namefont.ttf);/*путь к шрифту*/

}

Вроде бы все просто. Однако здесь может возникнуть следующая проблема – размер вашего шрифта может оказаться очень большим, особенно если он содержит много знаков, различных способов начертаний (жирный, курсив, подчеркивание). В этом случае бывает полезно воспользоваться онлайн сервисом @font-face Generator.

Выбираете режим работы Easy или Expert и настраиваете параметры нужным вам образом.

Поэкспериментируйте, вы быстро разберетесь с настройками и оцените удобство этого сервиса. Можно выбрать приблизительно такой вариант:

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

Теперь надо подредактировать файл стилей style.css на сервере, скопировав необходимое из полученного файла stylesheet.css. В результате должно получиться что-то похожее на:

В конце концов останется только загрузить папку fonts на сервер и прописать шрифт в стилях.

Что еще можно отметить?

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

Правило @font-face открывает перед web-разработчиками новые горизонты. Однако в настоящее время из-за недостаточной кроссбраузерности и возможностью нарушения авторских прав, его следует использовать с осторожностью.

С уважением, фрилансер-вебмастер Александр Шульгинов