Работая над проектом информационного портала "ИнфоПитер", решил логотип на сайте сделать в виде текста, ибо изначально он таковым и являлся. Да вот незадача, шрифт нестандартный. Нет его на компьютере у большинства пользователей. Чего, казалось бы, проще — подключим через CSS. Но стандартные способы, вроде этого:

Скачиваем ttf2eot.exe

Запускаем через C:\>ttf2eot.exe c:\windows\fonts\arial.ttf c:\output.eot

Полученный файл с расширением .eot загружаем на сайт и вывзываем через стилевое описание:

<!-- Safari 3.x, Firefox 3.1.x, Chrome 2.x -->
<style>
@font-face {
font-family: "testing";
src: url("output.ttf") format("truetype");
}
</style>
<!--[if IE]>
<style>
@font-face {
font-family: "testing";
src: url("output.eot");
}
</style>
<![endif]-->
<div style="font-family: testing">
Hello, Multiple Browser World!
</div>

найдённые в Интернете, к сожалению корректно работали не во всех браузерах. Да и управляться с командной строкой в программе ttf2eot.exe, честно говоря, было лениво. В итоге, с гуглом в руках наткнулся на замечательный сайт, позволяющий онлайн сконвертировать *.ttf в *.eot, а заодно и в не менее необходимые *.woff и *.svg, а также получить пример написания корректного CSS. И всё в одном флаконе, называемом @font-face Kit.

Вот пример стилевых описаний для подключения загружаемого пользователю шрифта CorridaCyrillic:

@font-face {
font-family: 'CorridaCyrillic';
src: url('corrida-webfont.eot');
src: local('☺'), url('corrida-webfont.woff') format('woff'), url('corrida-webfont.ttf') format('truetype'), url('corrida-webfont.svg#webfontGUbId0OJ') format('svg');
font-weight: normal;
font-style: normal;
}

Далее добавляем этот шрифт в описание нужного стиля в том-же внешнем файле CSS, не забывая про кавычки:

h1.logo-name
{
font-family: 'CorridaCyrillic', Arial, Helvetica, Sans-Serif;
font-size: 42px;
text-decoration: none;
padding: 0;
margin: 0;
color: #FFFFFF !important;
}

И золотой ключик у вас в руках!