Как подгрузить шрифт через CSS

 Довольно распространенной проблемой при верстке страницы является использование нестандартного шрифта. И тут сразу же думаешь, сделать его картинкой или как? Но с относительно давних времен появилась возможность подгружать шрифт, непосредственно, через стили CSS. С помощью свойства @font-face можно подгрузить практически любой шрифт. Оно имеет следующий синтаксис:

1
@font-face { настройки подгружаемого шрифта }

Ниже вы видите реальный пример подключения шрифта:

1
2
3
4
@font-face{
font-family: MyNewFONT;
src: url(MyNewFONT.ext);
}

Почти все браузеры имеют поддержку свойство css @font-face. Но у каждого есть свои особенности при подключении. Например, для подключения шрифта в IE6, файл должен иметь формат .eot, в то время как для IE9 используется формат .woff.

Так же бывает в IE6 не всегда рендерится шрифт, или рендерится, но неправильно. Для обхода этой проблемы лучше всего отдельно объявить шрифт с файлом типа .eot, и отдельно тот же шрифт с остальными типами файлов.
Для того, что бы во всех браузерах правильно применялись свойства italic, bold и другие подобные надо для параметров font-style и font-weight выставить значение normal.

С учетом ликвидации всех багов полный синтаксис в конечном итоге будет выглядеть так:

1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
font-family: MyNewFont;
src: local('☺'), url('MyNewFont.woff') format('woff'),
url('MyNewFont.ttf') format('truetype');
font-style:normal;
font-weight:normal;
}
@font-face {
font-family: MyNewFont;
src: url('MyNewFont.eot');
font-style:normal;
font-weight:normal;
}

Для генерации шрифта в разные типы файлов в интернете существует огромное количество сервисов, тут уж сами выбирайте какой лучше.

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