У меня есть архив с файлами шрифтов. Как их правильно подключить в style.css? Какие best practices есть?

Question

[krll-k]

У меня есть архив с файлами шрифтов. Как их правильно подключить в style.css? Хочу узнать лучшие практики, какие best practices есть? Инклуды и все такое

Answer 1

[lnked]

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

Comments

[lnked]

svg если не ошибаюсь использует Chrome

[MaxKondratenko]

лучше подключать все, браузер подгружает только нужные ему шрифты

Answer 2

[Евгений Комаров]

font-face

Comments

[krll-k]

@maNULL Хочу узнать лучшие практики, какие best practices есть? Инклуды и все такое

[Александр Зеленин]

@krll-k в гугле уже искали?

[krll-k]

@zelenin: гугл не человек, интеллектом пока не обладает. Если бы я знал что искать, я бы искал это в гугле. А я хочу чтобы мне отвечали люди, это быстрее и практичнее. Если бы я просил у гугла тоже самое что спрашиваю у вас, то мне бы пришлось перепробовал 100+ сочетаний/комбинаций, и не факт что я бы нашел что ищу - поэтому я чаще спрашиваю на тостере, у людей, а не гуглю

[Евгений Комаров]

@krll-k: в этом-то и первая ваша проблема - вы даже не пытаетесь учиться. Знания закрепляются только опытом - методом проб и ошибок, а вы просто копипастите код. Профита от этого не более чем ноль.

Answer 3

[bromzh]

1) конвертируешь шрифты тут (только надо выбрать "expert" и прописать нужные настройки, типа кирилицы и т.д.)
2) подключаешь созданный файл

Answer 4

[Юрий Драбик]

Когда-то очень долго провозился с этим, чтобы найти универсальное решение. С тех пор использую такую схему:

@font-face {
font-family: Myriad Pro;
src: url("../fonts/MyriadPro.eot");
src: url("../fonts/MyriadPro.eot?") format('eot');
src: local("Myriad Pro"), url("../fonts/MyriadPro.ttf");
}

@font-face {
font-family: Myriad Pro Bold;
src: url("../fonts/MyriadProBold.eot");
src: url("../fonts/MyriadProBold.eot?") format('eot');
src: local("Myriad Pro Bold"), url("../fonts/MyriadProBold.ttf");
}

И так далее каждый шрифт. У меня работает отлично на всех браузерах (эксплорер не считаю=)). Конвертирую в eot здесь https://www.kirsle.net/wizards/ttf2eot.cgi