Используем веб-шрифты правильно

Используем
веб-шрифты
правильно

Дмитрий Рычков
13/04/2016

Оптимизация шрифтов –

это одно из важнейших действий для улучшения производительности страницы

Проблемы с загрузкой шрифтов

загружаются медленно
блокируют отрисовку страницы
дёргаются

FOUT – Flash Of Unstyled Text

FOIT – Flash Of Invisible Text

Почему?

Ссылка на источник

Браузер может не показывать текст

отображает текст только после того, как шрифт загружен

задерживают отрисовку до 3 сек, после чего используют фолбэк

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

Проблема плохого соединения

мобильные устройства
сетевые задержки

Как пользователь Chrome видит ваш сайт

при медленном соединении

в первые 3 секунды

Как пользователь Safari видит ваш сайт

при медленном соединении

до тех пор, пока не загрузятся шрифты

Очень часто текст – это главное

ради чего пользователи приходят на ваш сайт

Долгое ожидание

может приводить пользователей в ярость, а вам приносить убытки

Как оптимизировать загрузку шрифта?

сжимать
загружать асинхронно
кешировать
показывать по готовности

@font-face

Это хорошо, но мало контроля

font-display

			@font-face {
				font-family: 'Open Sans';
				font-display: swap;
				src: url(...) format('woff2');
			}

font-display

auto | block | swap | fallback | optional

Подробнее

Во всех современных браузерах

			@font-face {
				font-family: 'Open Sans';
				font-style: normal;
				font-weight: 400;
				src: local('Open Sans'),
					 url(...) format('woff2'),
					 url(...) format('woff');
			}

Форматы шрифтов

WOFF
WOFF2
TTF
EOT
SVG

Форматы шрифтов

WOFF
WOFF2

TTF
EOT
SVG

Android 4.3
IE 8
Safari 5

WOFF — наше всё

Поддержка браузерами ~ 90%

по данным caniuse.com

WOFF2 ~ 55%

Советы на все времена

Используйте только нужные unicode-глифы.
Используйте правильные форматы шрифтов каждого браузера.
Ставьте http-заголовки для кеширования.
Избегайте конвертирования.
Используйте GZIP.

Подробнее:

developers.google.com

Оптимизируем подключение
из Google Fonts

Open Sans

семейство serif
латинские, греческие и кириллические символы
10 начертаний
2 Мб без сжатия

<link> и @import

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

блокирующие запросы
много запросов
FOIT / FOUT

Web Font Loader

			<script src="webfont.js"></script>
			<script>
				WebFont.load({
					google: {
					  families: ['Open Sans:400,700:latin']
					}
				});
			</script>

Web Font Loader

События: loading, active, inactive

			<html class="
				wf-opensans-n4-active
				wf-opensans-n7-active
				wf-active
			">

Web Font Loader

			body {
				font-family: serif;
			}
			.wf-active body {
				font-family: 'Open Sans', serif;
			}

Web Font Loader

FOUT при каждой загрузке страницы

Чтобы этого избежать, сохраняем состояние в куках или сессии

			WebFontConfig = {
				active: function() {
					sessionStorage.fonts = true;
				}
			}

Web Font Loader

			<script>
				(function() {
				  if (sessionStorage.fonts) {
					  // Fonts cached. Add font class.
				  } else {
					  // No fonts cached.
				  }
				})();
			</script>

Web Font Loader

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

дополнительный запрос за скриптом (~5 kb gzipped)
FOUT

Font Face Observer

Шрифты подключаются любым способом

Font Face Observer

			<script src="fontfaceobserver.js"></script>
			<script>
				var font = new FontFaceObserver('Open Sans', {
					weight: 400
				});
				font.load().then(function () {
					document.documentElement.classList.add('wf-loaded');
				});
			</script>

Font Face Observer

			body {
				font-family: serif;
			}
			.wf-loaded body {
				font-family: 'Open Sans', serif;
			}

Font Face Observer

асинхронность
браузерный кеш
подключение любым способом
промисы, таймауты
отсутствие FOUT / FOIT

дополнительный запрос за скриптом
сложная конфигурация

Localstorage

сервис localFont
npm-пакет font-store
способ от Dillon de Voor

Localstorage

index.html

			<style>
			@font-face {
				font-family: 'Open Sans';
				font-weight: 400;
				font-style: normal;
				src: url(base64...) format('woff2');
			}
			</style>

Перед отрисовкой страницы проверяем:

поддерживается ли localstorage...
какой формат выбрать...
уже есть в кеше?

Если всё OK — показываем шрифт не медля

При первой загрузке страницы

проверяем доступ к localstorage...
загружаем json-файл с base64-шрифтом...
сохраняем в localstorage...

Если всё OK — показываем шрифт

Localstorage

opensans.json

				{
					"md5": 		"font-hash-sum",
					"value": 	"@font-face{font-family:'Open Sans';
								src:url(base64) ...
								...
				}

Localstorage

index.html

				<script async>
					var md5 = 'font-hash-sum';
					function insertFont(value) {
                		var style = document.createElement('style');
                		style.innerHTML = value;
                		document.head.appendChild(style);
					}

			var cache = window.localStorage.getItem('opensans');
			if (cache) {
				insertFont(cache.value);
			}
			else {
				fetch('opensans.json')
				  .then(function(response) { return response.json() }
				  .then(function(json) {
					  insertFont(json.value);
					  window.localStorage.setItem('opensans', json.value);
				  }
			}

Localstorage

асинхронность
кеширование
единственный сетевой запрос при первой загрузке
отсутствие FOUT / FOIT

сложная конфигурация
вопросы производительности
не используется браузерный кеш

Что насчет Font Loading API?

Пока не стандарт, но уже поддерживают все те же браузеры, которые поддерживают WOFF2

Итог

Способ	Удобство	Эффективность
Google Fonts <link>	***	*
Web Font Loader	**	**
Font Face Observer	**	***
localstorage	*	***

Спасибо за внимание

Слайды: corsairdnb.github.io/fonts-slides

VK: vk.com/corsairdnb

Wrike: www.wrike.com