Сначала делается определение шрифта с помощью @font-face, потом его применение (в примере ниже тег body):
/* только для Internet Explorer 4+ */
@font-face {
font-family: EuroSansProLig;
src: url(EuroSansProLig.eot);
}
/* далее для всех остальных браузеров */
@font-face {
font-family: Graublau Sans Web;
src: local("Graublau Sans Web"),
local("GraublauSansWeb"),
url(GraublauWeb.otf) format("opentype");
}
/* для ttf шрифтов */
@font-face {
font-family: Graublau Sans Web;
src: local("Graublau Sans Web"),
local("GraublauSansWeb"),
url(GraublauWeb.ttf) format("truetype");
}
body {
font-family: Graublau Sans Web, EuroSansProLig,
Arial, sans-serif;
}
Скачать программу для конвертации шрифта в формат eot, то есть, для IE >> Embedded OpenType
Еще один способ внедрения шрифтов на сайт это загрузить файл шрифта на сайт и прописать для него URL:
Font-family:http://jdevelop.info/my_font.ttf;
Браузер будет загружать шрифт с указанного адреса лишь в случае отсутствия этого шрифта в стандартном месте хранения шрифтов. Не работает в IE.
И вот, пожалуй, самый распространенный сейчас сервис для генерации веб-шрифтов это www.fontsquirrel.com
Вот пример @font-face для разных браузеров, сделанный сервисом fontsquirrel
@font-face {
font-family: 'MyriadProRegular';
src: url('../fonts/myriadpro-regular-webfont.eot');
src: local('O'), url('../fonts/myriadpro-regular-webfont.woff') format('woff'), url('../fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('../fonts/myriadpro-regular-webfont.svg#webfontz220ziad') format('svg');
font-weight: normal;
font-style: normal;
}
Сгенерировать набор шрифтов для сайта с помощью этой белки просто >> вот краткое описание для сервиса Fontsquirrel