Как быстро загружать шрифты?

Question

[kiberlain]

Прошу не смеяться над вопросом и поделится своими методоми быстрой загрузки шрифтов.
Гипотетическая ситуация: поехавший дезигнер, который нарисовал макеты с тремя разными шрифтами, в каждом из которых по 10 начертаний (и все они на страничке нужны).
Вы как обычно прописали волшебную таблетку:

font-family:system-ui,-apple-system, BlinkMacSystemFont,  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",   "Helvetica Neue", sans-serif;

сконвертировали нестандартные шрифты через transfonter, подключили и видите типичный баг: при загрузке страницы сначала (1-2-3 секунды) отображается дефолтный шрифт, и только потом нестандартный. Как быть? ("поставь прелоадер" не предлагать)

Comments

[Сергей Горячев]

Вы как обычно прописали волшебную таблетку:

сконвертировали нестандартные шрифты через transfonter

А кто сказал, что мы вообще пользуемся такой херней?

Мы работаем через https://www.npmjs.com/package/gulp-fontgen и https://github.com/ecomfe/fontmin

[kiberlain]

Сергей Горячев, это типично для мелких галер, потому так и написал

Answer 1

[alex-1917]

1. Грузи сначала шрифты, которые используются на первом экране, остальные асинхронно (как - гоу в гугл!)
2. Если шрифт гугловский, грузи оттуда в любом случае.
3. На следующий проект постарайся использовать 2 дополнительных шрифта максимум, ваши завитушки никому не нужны, кроме чувства самоудовлетворения дизайнера. Идеально - ОДИН доп. шрифт. Подсказка: Helevetica - это не доп. шрифт.
4. Дизайнера отправь в ПТУ.

На заметку: один шрифт создает от 3 до 6 запросов на сервер, умножаем твои 6 шрифтов на 6 запросов, получаем 36 запросов , вась! Уже превышение браузерного лимита, поэтому пользователь сидит и сосет лапку в ожидании чуда в виде открытия несчастной странички...
На планшете это будет выглядеть как бесконечный цикл перезагрузки страницы, можете посетителей с мобильным трафиком сразу выкинуть из статистики.

Answer 2

[Андрей Верх]

Чудес не бывает, шрифту в любом случае надо загрузиться. То что первые секунды дефолтные шрифты показываются, это как бы нормально. Хуже, когда вообще ничего не показывается.

Можете попробовать
font-display

Comments

[Андрей Верх]

И разумеется шрифты которые есть на GOOGLE FONTS, лучше оттуда и подключить, т.к. высока вероятность, что пользователь их уже скачивал.

Answer 3

[Алексей Скляров]

Во-первых, зачем вы так много шрифтов указываете в font-family? у вас их не должно столько использоваться. Если столько используется - сократите до двух-трех, дизайнера отправьте в пту.

Во-вторых, как подключаю шрифты я:

В начале CSS документа у меня это (привел SASS):

Код

@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot");
			src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansRegular/MuseoSansRegular.woff") format("woff"),
			url("../fonts/MuseoSansRegular/MuseoSansRegular.ttf") format("truetype");
			font-style: normal;
			font-weight: 300;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansBold/MuseoSansBold.eot");
			src: url("../fonts/MuseoSansBold/MuseoSansBold.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansBold/MuseoSansBold.woff") format("woff"),
			url("../fonts/MuseoSansBold/MuseoSansBold.ttf") format("truetype");
			font-style: normal;
			font-weight: 700;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot");
			src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansItalic/MuseoSansItalic.woff") format("woff"),
			url("../fonts/MuseoSansItalic/MuseoSansItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 300;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansLight/MuseoSansLight.eot");
			src: url("../fonts/MuseoSansLight/MuseoSansLight.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansLight/MuseoSansLight.woff") format("woff"),
			url("../fonts/MuseoSansLight/MuseoSansLight.ttf") format("truetype");
			font-style: normal;
			font-weight: 100;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot");
			src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansMedium/MuseoSansMedium.woff") format("woff"),
			url("../fonts/MuseoSansMedium/MuseoSansMedium.ttf") format("truetype");
			font-style: normal;
			font-weight: 500;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansBlack/MuseoSansBlack.eot");
			src: url("../fonts/MuseoSansBlack/MuseoSansBlack.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansBlack/MuseoSansBlack.woff") format("woff"),
			url("../fonts/MuseoSansBlack/MuseoSansBlack.ttf") format("truetype");
			font-style: normal;
			font-weight: 900;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.eot");
			src: url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.woff") format("woff"),
			url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 700;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.eot");
			src: url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.woff") format("woff"),
			url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 500;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.eot");
			src: url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.woff") format("woff"),
			url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 100;
	}

	@font-face {
			font-family: "MuseoSans";
			src: url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.eot");
			src: url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.woff") format("woff"),
			url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 900;
	}

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

Самый часто используемый шрифт прописываем в body:

body {
font-family: 'MuseoSans', Arial, sans-serif;
font-weight:300;
font-style:normal;
}

Для второго шрифта (если используется) определяете уже в самих классах (можете объединить их и прописать сразу для всех).

Собственно все.

P.S Не забывайте, что для нормального отображения шрифтов, нужно собирать все типы файлов шрифта (otf,ttf,svg). Название для подключаемых шрифтов используйте одно и тоже, меняться должно только значение font-weight, font-style (жирность и начертание шрифта).

Comments

[tarasui]

Я бы убрал svg, есть же woff.
Сократил названия путей. И удалить eot. Он только для ИЕ8 (специально посмотрел метрику за год это 0,065 %)

@font-face{
	font-family: 'Museo';
	src: url('../font/museo300.woff') format('woff'),
	url('../font/museo300.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'Museo';
	src: url('../font/museo300-italic.woff') format('woff'),
	url('../font/museo300-italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face{
	font-family: 'Museo';
	src: url('../font/museo700.woff') format('woff'),
	url('../font/museo700.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
body {
	font-family: 'Museo', Arial, sans-serif; 
}

[kiberlain]

tarasui, хороший ответ, спасибо

Answer 4

[d'Ivan]

Основная задержка связана с тем когда браузер решает скачивать ресурсы, тем сколько времени это занимает и тем когда браузер будет готов отобразить.
Советы Гугла: Web Font Optimization
CSS unicode-range может ускорить чтение глифов со шрифта из определённого диапазона алфавита без необходимости загружать всю таблицу.