Внедрение нестандартных шрифтов посредством @font-face

19.10.2009 @font-face, css, css3

Jonathan Snook провел отличное исследование и опубликовал руководство по добавлению нестандартных шрифтов «Becoming a Font Embedding Master».

• Используется правило CSS3 @font-face.
• Поддерживается следующими браузерами: IE4+, Chrome 0.3+, Opera 9+, FF, Safari.
• Необходимые файлы: .ttf/.otf, .oet, .svg.

Инструменты:

1. TTF2EOT
конвертация TTF в EOT для поддержки IE (на MAC OSX устанавливается из портов)

ttf2eot < Candara.ttf > Candara.eot

2. FontForge
конвертация OTF в TTF

3. Batik
преобразование TTF в SVG.

java -jar batik-ttf2svg.jar Candara.ttf -o Candara.svg -id Candara

@font-face {
	font-family: 'Candara';
		src: url("Candara.eot");
		src: local('Candara'),
			url("Candara.svg#Candara") format('svg'),
			url("Candara.otf") format('opentype');
}

Пример со шрифтом Candara [Скачать]

Подробности в статье Becoming a Font Embedding Master и Screencast: Converting OTF or TTF to EOT

Fonts available for @font-face embedding