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

Прошу не смеяться над вопросом и поделится своими методоми быстрой загрузки шрифтов.
Гипотетическая ситуация: поехавший дезигнер, который нарисовал макеты с тремя разными шрифтами, в каждом из которых по 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 секунды) отображается дефолтный шрифт, и только потом нестандартный. Как быть? ("поставь прелоадер" не предлагать)
  • Вопрос задан
  • 1137 просмотров
Пригласить эксперта
Ответы на вопрос 4
alex-1917
@alex-1917
Если ответ помог, отметь решением
1. Грузи сначала шрифты, которые используются на первом экране, остальные асинхронно (как - гоу в гугл!)
2. Если шрифт гугловский, грузи оттуда в любом случае.
3. На следующий проект постарайся использовать 2 дополнительных шрифта максимум, ваши завитушки никому не нужны, кроме чувства самоудовлетворения дизайнера. Идеально - ОДИН доп. шрифт. Подсказка: Helevetica - это не доп. шрифт.
4. Дизайнера отправь в ПТУ.

На заметку: один шрифт создает от 3 до 6 запросов на сервер, умножаем твои 6 шрифтов на 6 запросов, получаем 36 запросов , вась! Уже превышение браузерного лимита, поэтому пользователь сидит и сосет лапку в ожидании чуда в виде открытия несчастной странички...
На планшете это будет выглядеть как бесконечный цикл перезагрузки страницы, можете посетителей с мобильным трафиком сразу выкинуть из статистики.
Ответ написан
Комментировать
sadisme
@sadisme
font-size:30rem
Чудес не бывает, шрифту в любом случае надо загрузиться. То что первые секунды дефолтные шрифты показываются, это как бы нормально. Хуже, когда вообще ничего не показывается.

Можете попробовать
font-display
Ответ написан
Во-первых, зачем вы так много шрифтов указываете в 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 (жирность и начертание шрифта).
Ответ написан
Основная задержка связана с тем когда браузер решает скачивать ресурсы, тем сколько времени это занимает и тем когда браузер будет готов отобразить.
Советы Гугла: Web Font Optimization
CSS unicode-range может ускорить чтение глифов со шрифта из определённого диапазона алфавита без необходимости загружать всю таблицу.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы