Иногда возникает необходимость использования на сайте нестандартных шрифтов. В данной статье будет рассказано о простом способе «прикрутить» шрифт на ваш сайт средствами CSS. Рассказывать буду на примере Franklin Gothic Medium Cond.
Решение подходит для: Opera, Firefox и IE.

Итак, приступим.

1. Для начала нам понадобится файл самого шрифта, в формате TTF (TrueType Font). Для этого можно воспользоваться этим сервисом. На нем вы найдете какой угодно шрифт и сразу проверите его в действии.
2. После закачки необходимо .ttf сконвертировать в .eot (Embedded OpenType). Заходим сюда. Нашжав «Обзор» выбираем .ttf, после чего жмем кнопку «Convert TTF to EOF!». Сохраняем на диске.
3. Создаем папку fonts в папке с нашим шаблоном и копируем туда Franklin.ttf и Franklin.eof. Кстати, файлы со шрифтами можете озаглавить как угодно.
4. Далее необходимо добавить следующие строки в css файл нашего шаблона, причем выше стилей, к которым нужно будет привязать шрифт. Также хочу заметить порядок подключения файлов: сначала .eot, а потом .ttf.
   
   [user=font]font[/user]-face {
     font-family: "Franklin Gothic Medium Cond";
     src: url("../fonts/Franklin.eot");
   }

   [user=font]font[/user]-face {
     font-family: "Franklin Gothic Medium Cond";
     src: url("../fonts/Franklin.ttf");
   }

   Спросите почему подключаем два файла? Дело в том, что .ttf поддерживается Мозилой и Оперой, а .eof необходим для IE. Исп. пост glu2006 в теме [#38487]Typeface - любой шрифт на сайте[/#].

5. В том же файле со стилями мы теперь можем указывать в классах наш шрифт:
   
   .content p {
           font-family: "Franklin Gothic Medium Cond";
   }

Все готово! Жмем F5 и наслаждаемся новым шрифтом на нашем сайте из Оперы, Мозилы и IE.

Пример использования этого решения можете увидеть здесь. Левое меню и заголовок h2 выполнены с использованием нашего нестандартного шрифта.