Введение

По данным статистики на данный момент минимум 92% десктопных браузеров правильно работают с @font-face. Делается все просто: называем шрифт, указывает путь до него, используем его прямо в CSS:

// Объявляем шрифт
@font-face {
    font-family: 'Имя шрифта';
    src: url('путь/до/него');
} 

// Применяем шрифт
p {
    font-family: 'Имя шрифта', Arial; 
}

Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но, не все так просто, разным браузерам нужны разные форматы шрифтов.

Форматы шрифтов

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:

• Internet Explorer (все версии) — EOT;
• Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
• Opera (начиная с 10) — TTF/OTF;
• Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
• Safari (начиная с 3.2) — TTF/OTF.

Как видим, у нас есть минимум четыре типа файлов, которые нужно подгружать.

Правильное использование

Для того, чтобы каждый раз не тратить кучу времени на создание нескольких шрифтовых файлов и разного синтаксиса подключения, хорошие люди сделали сервис — Шрифтовая белка. Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов.

Теперь можно проверить, что все везде работает как надо. Предлагаю ради интереса посмотреть на то, как же выглядит кросс-браузерный @font-face:

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

На этом все. Не злоупотребляйте различными шрифтами ;-)