Работа со шрифтами в вебе - это всегда интересная задача, но важно учитывать особенности браузеров. Например, Internet Explorer «понимает» исключительно файлы с расширением '.eot', тогда как современные гиганты - Firefox, Chrome, Safari и Opera - без проблем поддерживают форматы '.ttf' и '.otf'.

Правда в том, что правило @font-face открывает перед нами двери к использованию авторских или собственных шрифтов прямо на веб-странице. Это отличная возможность выделиться! Главное отличие таких шрифтов от стандартных «безопасных» заключается в источнике загрузки: обычные системные шрифты отображаются только при их наличии на компьютере пользователя, а те, что подключены через @font-face, уверенно загружаются с вашего сервера.

Чтобы всё заработало как часы, необходимо создать правило @font-face и присвоить шрифту уникальное имя с помощью свойства font-family. Далее указываете путь к файлу - он может быть как относительным, так и абсолютным:

 @font-face { font-family: myFont; src: url("Fun_Light.ttf"), url("Fun_Light.eot"); } 

Здесь кроется важный нюанс: для безупречной работы во всех браузерах придётся перечислить несколько файлов с разными расширениями через запятую. Поскольку каждый браузер предпочитает свой формат, указать единственный файл просто не получится. Кроме того, стоит позаботиться о пользователях со старыми версиями браузеров, которые могут не поддерживать @font-face. В таком случае разумно добавить в стиле элемента стандартные системные шрифты как запасной вариант:

 @font-face { font-family: myFont; src: url("Fun_Light.ttf"), url("Fun_Light.eot"); } p { font-family: myFont, serif; }

 html head style type="text/css" @font-face { font-family: myFont; src: url('terminator_real_nfi.ttf'), url('terminator.eot'); /* IE */ } div { font-family: myFont; } /style /head body div style="font-size: 40px;" TERMINATOR /div /body /html