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