Нестандартный шрифт на сайт. Средствами CSS

Очень часто в дизайн сайта гораздо лучше вписываются нестандартные шрифты, чем стандартные, но вылезать из-за рамок стандартов не хочется. Для вылаза из рамок существуют, конечно, специальные скрипты, но этот вариант всяко уступает тому, которое уже заранее создано в спецификации CSS — свойство @font-face.
В предлагаемой таблице указано какие шрифты какими версиями браузеров поддерживаются. Материалы взяты из интернета и дополнены собственными наблюдениями в виде указанных значков +. Для тестирования я использовал Chrome 8.0, Opera 11.01, Firefox 4.0b7, Safari 5.0.

Вот только для IE не все так просто. Хотя он и первый начал поддерживать внедрение сторонних шрифтов (еще с 1997 года с выходом Internet Explorera 4-й версии!!!), он требует особого формата для шрифта — EOT (Embedded OpenType). Формат EOT решает сразу две задачи:

— сжимает файл шрифта, делая его вес в разы меньше (судя по тестам коллег этот метод лучше сжимает чем и RAR, и ZIP, и gzip методы)
— шифрует файл: в файл шрифта записывается информация, где он должен быть использован. Вне этого адреса этот шрифт работать не будет.

В хроме работают все шрифты, но раньше всех заработал SVG. А вот для огнелиса про SVG можно забыть, т.к. в четвёртой версии он не поддерживается. Впрочем, для Сафари и Оперы почти такая же история – в последних версиях поддержка SVG также убрана, а рабочим остался только TTF.

Наглядный пример — шрифт внедренный для нашего Интернет-магазина
CSS код для внедрения нестандартного шрифта:

@font-face {
font-family: gothic_respectum;
src: local ('☺'),
src: url («.../image/font/gothic_respectum.eot»);
url («.../image/font/gothic_respectum.woff») format («woff»),
url («.../image/font/gothic_respectum.ttf») format («truetype»),
url («.../image/font/gothic_respectum.svg») format («svg»);
font-weight: normal;
font-style: normal;
}

Вставляем код в css к нужному тегу что бы применялось это правило и наш — нестандартный шрифт:

h2 {
font-size: 17px;
font-family:gothic_respectum_italic, arial;
}

И вот получаем результат красивый шрифт на сайте:

Достоинства использования @font-face

Основные достоинства очевидны: сео, возможный поиск по тексту, работа с ним, не говоря уже о том, что можно работать с текстом как хочешь – line-height, letter-spacing, first-letter – всё это возможно.

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

Недостатки использования @font-face

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