Браузер 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;} 

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