Как правильно прописывать подгрузку шрифтов для всех браузеров?

Question

[Влад]

Как правильно прописывать подгрузку шрифтов для всех браузеров?
Если я пропишу вот так, то браузер загрузит все шрифты или выберет оптимальный?

@font-face {
	font-family: 'DIN Pro';
	src: url('/fonts/DIN-Pro/fonts/din_pro.eot'); /* IE 9 Compatibility Mode */
	src: url('/fonts/DIN-Pro/fonts/din_pro.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('/fonts/DIN-Pro/fonts/din_pro.woff2') format('woff2'), /* Super Modern Browsers */
		url('/fonts/DIN-Pro/fonts/din_pro.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('/fonts/DIN-Pro/fonts/din_pro.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/fonts/DIN-Pro/fonts/din_pro.svg#din_pro') format('svg'); /* Chrome < 4, Legacy iOS */
}

Comments

[Ivan Ustûžanin]

вроде как уже достаточно woff2 и woff

Answer 1

[Сергей delphinpro]

Загрузится только один подходящий шрифт.

PS.
Вам правда нужна поддержка IE9, и прочей древности? Достаточно подключить woff2. Это покроет браузеры с 2017 года выпуска. Можно добавить woff и поддерживать браузеры с 2011 года (кроме 4 андроидов, но их все равно уже нет).

Answer 2

[Михаил Р.]

Рекомендую шрифты подключать от наиболее к наименее современному (с верху в низ), замечал, что ранее некоторые браузеры подключали первый попавшийся и поддерживаемый ими шрифт.

Если я пропишу вот так, то браузер загрузит все шрифты или выберет оптимальный?

Выберет самый современный, на основе своих алгоритмов, или смотрите выше.

Рекомендую раздробить шрифты на начертание (тонкий, стандартный, жирный итп), в таком случае, будет подключаться лишь тот, которому соответствует нужное начертание. Еще можно раздробить по языку (для русского языка - русский, для английского - английский итп), спецсимволам итп. В таком варианте у меня получалось сократить файл с конкретным шрифтом с ~90 до ~15кб.