TTF - True Type Format - просто вообще один из самых распространенных, понимается всеми браузерами, кроме IE.
OTF - Open Type Format - тоже один из самых распространенных, более современный,
призванный исправить некоторые ограничения TTF, понимается всеми браузерами, кроме, конечно, IE.
WOFF - Web Open Font Format - единственный формат, понимаемый всеми и даже IE... но только не ниже 9-й версии!
Ниже 9-й - другой формат. Кроме того, он вдвое компактнее, чем TTF. Вот им и будем верстать.
SVG - Scalable Vector Graphics - за ним будущее. А еще есть: afm, bin, cff, dfont, pfa, pfb, pfm, ps, pt3, suit, t42, tfm, ttc, ...
Как поместить на сайте надпись, сделанную шрифтом, например, PT Sans?
Помещаем в папку, скажем, my_fonts, файл шрифта ptsans.woff
Оформляем в HTML саму надпись, пусть это будет некоторый заголовок: <h1 class='beautiful__letters'> Мой Красивый Заголовок <h1>
Прописываем в CSS наш шрифт и стиль надписи: @font-face {font-family: 'niceFont'; src: url('my_fonts/ptsans.woff');}
h1.beautiful__letters{font-family: 'niceFont'}
Что делать, если нет файла формата WOFF, а есть, скажем, TTF (а именно так чаще всего и будет)?
Можно забыть про пользователей IE, тогда - делаем все то же самое с тем файлом, который у нас есть
