Мурлогрыз
Короткое замыкание

Нестандартные шрифты на сайте

В своё время перепробовала пару методов, которые преобразовывали обычные шрифты в нестандартные (Cufon, typeface, sIFR – плагин для WP). Но ни один так и не удовлетворил потребностей: кроссбраузерности, простоты использования. После тестирования @font-family наконец отобразился везде, где необходимо. Протестировала IE6-IE9, Safari, Chrome, Opera, Firefox.
Собственно сам код


@font-face
{
font-family: ‘PGIsadoraCyrPro-Regular’;
src: url(‘/wp-content/themes/ad-clerum-10/font/PGIsadoraCyrPro-Regular.eot?’) format(‘eot’);
src: local(‘PGIsadoraCyrPro-Regular’),
url(‘/wp-content/themes/ad-clerum-10/font/PGIsadoraCyrPro-Regular.woff’) format(‘woff’),
url(‘/wp-content/themes/ad-clerum-10/font/PGIsadoraCyrPro-Regular.ttf’) format(‘truetype’),
url(‘/wp-content/themes/ad-clerum-10/font/PGIsadoraCyrPro-Regular.svg#PGIsadoraCyrPro-Regular’) format(‘svg’);
}

1) создаем шрифт с названием PGIsadoraCyrPro-Regular
2) прописываем путь к шрифту формата eot ( для IE )
3) браузер не будет подгружать шрифт, если такой уже есть на компьютере ( хотя по сути файл с шрифтом весит от 80 до 200 кБ, что не критично )
4) прописываем путь к шрифту формата woff ( для Firefox 3.5 и выше )
5) прописываем путь к шрифту формата ttf ( для Firefox 3.5, для Opera 10.0 и выше, для Safari 3.2 и выше )
6) прописываем путь к шрифту формата svg ( для Chrome всех версий )

качаем шрифт формата ttf, идем на сайт конвертации шрифтов, я пользовалась этим, единственно была проблема с отображением одного шрифта для IE, поэтому eot я конвертнула тут . Есть еще достаточное количество сервисов по конвертации, кому что нравится.



Теги: ,

Оставить комментарий