записки на память об администрировании, web — программировании и прочих смежных темах

Нестандартные шрифты на сайт

Нестандартные шрифты на сайт

Раньше для добавления экзотического шрифта на сайт пользовался Cufon-он, но если шрифты нужно заменить везде, то такой подход заметно подгружал браузер при отрисовке. Поэтому начал пользоваться @font-face. На хабре была статья, где писали что произвольный шрифт можно добавить таким образом:



@font-face { 
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Вроде бы всё хорошо, через http://onlinefontconverter.com/ конвертируем шрифт в нужные форматы и добавляем на сайт, но как выяснилось позднее всеми любимый IE не хочет отображать нужные шрифты таким образом. Попробовал воспользоваться генератором http://www.fontsquirrel.com/fontface/generator Всё заработало и при анализе css выяснилось, что правильнее писать так в CSS:

@font-face { 
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot');
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}

На счет font-weight и font-style не уверен, но теоретически должно работать и без них