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

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

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

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

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

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

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

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

1. конвертация из TTF в EOT – https://www.kirsle.net/wizards/ttf2eot.cgi;
2. конвертация из TFF в WOFF – https://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.