Сторонние шрифты для сайта

Многие web-разработчики стремятся использовать при разработке новых сайтов только “безопасные” шрифты, которые есть практически на каждом компьютере с любой операционной системой. Оно, наверное, и правильно, так как лишняя нагрузка на интернет-канал – это не есть хорошо и нужно делать по возможности быстрые сайты, но возникают моменты, когда все таки приходится использовать сторонний шрифт.

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

Вводная часть

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

Необходимо добавить шрифт, который бы красиво отображался во всех браузерах разных версий. Web-разработчику, как всегда, приходится учитывать не только браузеры, который идут “на острие” web-технологий, но и старинных мамонтов, типо IE6, которые все еще встречаются на пользовательских машинах.

Подготовительные работы

Вот нашел web-разработчик подходящий ему шрифт. Скорее всего найденный шрифт будет в формате ttf. К нашему несчастью мало браузеров умеют корректно работать с этим форматом. К тому же все современные браузеры уже давно отлично работают с woff, а старый ie6 вообще только eot и видит. Что делать?

Ответ: конвертация!

Только стоит учитывать, что скорее всего мы будем конвертировать кириллические шрифты, поддержка которых на распространенных онлайн сервисах в интернете, напрочь отсутствует. Можно конечно поискать оффлайн конвертор, но так как на дворе 21 век – это не есть гуд.

Вот сервисы, которые 100% работают с кириллическими шрифтами:

  1. конвертация из TTF в EOThttp://www.kirsle.net/wizards/ttf2eot.cgi;
  2. конвертация из TFF в WOFFhttp://fontfacegen.com/ttf-to-woff-converter.

Всё! Теперь мы имеем в наличие 3 нужных формата одного шрифта.

Обычно я все сторонние шрифты, которые подключаю, складываю на хостинге в директорию /fonts/, так как с ними проще всего работать в дальнейшем.

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

Я не буду расписывать всех тонкостей и объяснять почему это выглядит именно так, а просто приведу кусок кода, который используется на одном боевом сайте. Вот он:


@font-face {
	font-family: Conv_28_AGLettericaCond;
	src: url(../fonts/AGLettericaCond.eot?);
	}
@font-face {
	font-family: Conv_28_AGLettericaCond;
	src: url(../fonts/AGLettericaCond.woff) format('woff'),
		url(../fonts/AGLettericaCond.ttf) format('truetype');
	}

Символ ? в первой части кода – это не ошибка, а жизненная необходимость для IE. Не стоит убирать этот символ.

К блоку, к которому нужно применить новый шрифт, добавляем CSS-параметр:

font-family: Conv_28_AGLettericaCond;

Этот способ работает во всех версиях IE>6, в FF>2.0, Opera>9, Google Chrome и Safari.

Комментарии:

  1. Михаил опубликовал комментарий 3 Июнь 2013, 20:35 #

    в Iron Ware (Хромиум, хром) – не рботает этот метод …

    | Ответить
  2. Евгений опубликовал комментарий 15 Июнь 2013, 11:45 #

    Web Marka, что-то похожее на google fonts – web-marka.com – нестандартные кириллические шрифты для сайта

    | Ответить
Имя
e-mail
Сайт
Текст комментария: