Загрузка шрифта

Подробности

Категория: HTML, CSS, javascript

Сначала делается определение шрифта с помощью @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 - Embedded OpenType

Здесь можно почитать статью об истории создания формата eot (механизм защиты от нелегального использования шрифтов): http://www.umade.ru/log/2009/07/font-embed-eot-font-face/

Еще один способ попался в поиске:

Font-family:http://jdevelop.info/my_font.ttf;

Браузер будет загружать шрифт с указанного адреса лишь в случае отсутствия этого шрифта в стандартном месте хранения шрифтов. Не работает в IE.

Вот пример @font-face для разных браузеров, сделанный сервисом http://www.fontsquirrel.com/fontface/generator

@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;
}

Еще один EOT Font Converter: http://www.kirsle.net/wizards/ttf2eot.cgi