Font display swap не работает

Как подключить и оптимизировать нестандартные шрифты

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

Подключение шрифтов с помощью правила @font-face

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:

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

Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты.

Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.

Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.

FOIT, FOUT и FOFT

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

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .

Свойство font-display

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

• auto — поведение по умолчанию, зависит от браузера.
• block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
• swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
• fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
• optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.

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

Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.

Полезности

• HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
• Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
• Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
• Доклад Вадима Макеева про шрифты.
• Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Подключение шрифтов — часть вёрстки

А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.

Источник

Оптимизируем загрузку шрифтов Google

Шрифты Google легко внедрить на сайт, но они могут оказать большое влияние на время загрузки вашей страницы. Давайте рассмотрим, как мы можем загрузить их наиболее оптимальным способом.

Справедливости ради стоит сказать, что шрифты Google чрезвычайно популярны. На момент написания этой статьи, их просмотрели в Интернете более 29 триллионов раз, и легко понять, почему – сервис предоставляет доступ к более чем 900 красивым шрифтам, которые вы можете бесплатно использовать на своем веб-сайте. Без шрифтов Google вы были бы ограничены несколькими, так называемыми, «системными шрифтами», установленными на устройстве пользователя.

Системные шрифты или «безопасные веб-шрифты» – это шрифты, которые чаще всего предустанавливаются в операционных системах. Например, шрифты Arial и Georgia поставляются с дистрибутивами Windows, macOS и Linux.

Как и все хорошие вещи, использование шрифтов Google имеет свою цену. Каждый шрифт привносит в размер страницы свой вес, который веб-браузер должен загрузить, прежде чем его можно будет отобразить. При правильной настройке дополнительное время загрузки не заметно. Однако, стоить чуть ошибиться, и пользователю вашего сайта придется ждать несколько секунд, прежде чем появится какой-либо текст.

Шрифты Google уже оптимизированы

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

Давайте посмотрим на шрифт Roboto. GitHub говорит нам, что стандартный вариант этого шрифта весит 168kb:

Тем не менее, если запросить этот же вариант шрифта у Google Font API, то вы получите файл, размер которого будет всего 11kb. Как такое возможно?

Когда браузер делает запрос к API, Google сначала проверяет, какие типы файлов поддерживает браузер. Если вы используете последнюю версию Chrome, которая, как и большинство браузеров, поддерживает формат WOFF2, то шрифт будет предоставлен в этом сильно сжатом формате.

Если же заменить браузер на Internet Explorer 11, то вы получите шрифт в формате WOFF.

Наконец, если заменить браузер на IE8, то вы получите шрифт в формате EOT (Embedded OpenType).

Google Fonts поддерживает более 30 оптимизированных вариантов для каждого шрифта и автоматически определяет и предоставляет оптимальный вариант для каждой платформы и браузера. Илья Григорик

Это отличная особенность Google Fonts, — проверяя пользовательский агент, сервис предоставляет наиболее эффективные форматы шрифтов, которые поддерживает браузер.

Кэширование в браузере

Еще одна встроенная оптимизация Google Fonts — кеширование в браузере.

Из-за вездесущей природы Google Fonts браузеру не всегда нужно загружать полные файлы шрифтов. Например, сайт SmashingMagazine использует шрифт «Mija», если ваш браузер впервые видит этот шрифт, ему нужно будет полностью загрузить его до отображения текста, но при следующем посещении веб-сайта, использующего этот шрифт, браузер возьмет уже кэшированную версию.

Поскольку API Google Fonts становится все более широко используемым, вполне вероятно, что у посетителя вашего сайта или страницы уже есть в кэше браузера шрифты Google, используемые в вашем дизайне. FAQ, Google Fonts

Срок действия кэша браузера Google Fonts истекает через год, если он не будет очищен раньше.

Примечание: Mija не является шрифтом Google, но принципы кэширования не зависят от поставщика.

Возможна дополнительная оптимизация

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

1. Ограничение семейств шрифтов

Самая простая оптимизация — использовать как можно меньше семейств шрифтов. Каждый шрифт может добавлять к весу вашей страницы до 400 КБ. Умножьте на несколько разных семейств шрифтов, и вот уже шрифты весят больше, чем вся ваша страница.

Мы рекомендуем использовать не более двух шрифтов — один для заголовков и другой для содержимого. Как правило, этого бывает вполне достаточно. При правильном использовании свойств font-size, font-weight и color можно добиться превосходного результата даже с одним шрифтом.

Три разных значения font-weight одного семейства шрифтов (Source Sans Pro):

2. Исключайте ненужные варианты

Благодаря высокому стандарту качества шрифтов Google многие семейства шрифтов содержат полный спектр доступных значений для свойства font-weight:

• тонкий (100)
• тонкий курсив (100i)
• светлый (300)
• светлый курсив (300i)
• обычный (400)
• обычный курсив (400i)
• средний (600)
• средний курсив (600i)
• жирный (700)
• жирный курсив (700i)
• черный (800)
• черный курсив (800i)

Это отлично подходит для продвинутых сценариев использования, в которых могут потребоваться все 12 вариантов, но для обычного веб-сайта это означает загрузку всех 12 вариантов, когда вам может понадобиться только 3 или 4.

Например, семейство шрифтов Roboto весит

144 КБ. Однако, если вы используете только варианты «обычный», «обычный курсив» и «жирный», то это число уменьшается до

36 КБ. Экономия 75%!

Код по умолчанию для загрузки шрифтов Google выглядит следующим образом:

Если вы так сделаете, то загрузится только вариант ‘обычный 400’. Это означает, что весь светлый, жирный и курсивный текст будет отображаться неправильно.

Чтобы вместо этого загрузить все варианты шрифтов, нам нужно указать их в URL вызова следующим образом:

Однако, очень редко веб-сайт использует все варианты шрифта от тонкого (100) до черного (900). И здесь оптимальной стратегией будет указать только те варианты, которые вы планируете использовать:

Это особенно важно, когда используется несколько семейств шрифтов. Например, если вы используете Lato для заголовков, имеет смысл запрашивать только жирный вариант (и, возможно, еще жирный курсив):

3. Объединяйте запросы

Фрагмент кода, с которым мы работали выше, обращается к серверам Google (fonts.googleapis.com). Это называется HTTP запросом. При этом, чем больше HTTP запросов делает ваша веб-страница, тем дольше она загружается.

Если вы хотите загрузить два шрифта, то вы можете сделать так:

Это отлично будет работать, но приведет к тому, что браузер сделает два запроса. Мы же можем оптимизировать это объединив все в один запрос:

При этом не существует ограничений на количество шрифтов и вариантов в одном запросе.

4. Ресурсные указания

Ресурсные указания – это особые функции, поддерживаемые современными браузерами, которые могут повысить производительность сайта. Мы рассмотрим два таких указания: «Предварительная выборка DNS» и «Предварительное подключение».

Примечание: Если браузер не поддерживает современные функции, он просто игнорирует их. Таким образом, ваша веб-страница будет по-прежнему загружаться нормально.

Предварительная выборка DNS
Предварительная выборка DNS позволяет браузеру начать подключение к Google Fonts API (fonts.googleapis.com), как только страница начнет загружаться. Это означает, что к тому времени, когда браузер готов сделать запрос, часть работы уже будет выполнена.

Чтобы реализовать предварительную выборку DNS для шрифтов Google, просто добавьте на свои веб-страницы в секции такую строчку:

Предварительное подключение
Если вы посмотрите на код добавления шрифтов Google Fonts, то вам покажется, что это будет один HTTP запрос:

Однако, если мы посетим этот URL, то мы увидим еще три запроса на другой URL — https://fonts.gstatic.com. Один дополнительный запрос для каждого варианта шрифта.

Проблема с этими дополнительными запросами заключается в том, что браузер не начнет выполнять эти процессы до тех пор, пока не будет выполнен первый запрос https://fonts.googleapis.com/css. Вот здесь и может помочь Предварительное подключение.

Предварительное подключение — это своего рода расширенная версия предварительной выборки. Оно устанавливается на конкретном URL, который браузер собирается загрузить. Вместо того, чтобы просто выполнять поиск DNS, также завершается согласование TLS и TCP синхронизация.

Как и в случае с Предварительной выборкой DNS, предварительное подключение может быть реализовано с помощью одной строки кода:

Просто добавив эту строчку кода можно сократить время загрузки страницы на 100 мс. Это становится возможным благодаря запуску соединения одновременно с первоначальным запросом, а не по окончанию ожидания его завершения.

5. Размещение шрифтов локально

Шрифты Google распространяются по лицензии «Libre» или как «свободное программное обеспечение», что дает вам свободу использовать, изменять и распространять шрифты без запроса разрешения. Это означает, что, если вы не хотите, то можете не использовать хостинг Google. Вы можете размещать эти шрифты на своем сервере!

Все файлы шрифтов доступны на Github. Также, можно скачать файл архива zip, содержащий все шрифты (387MB).

Наконец, есть вспомогательный сервис, который позволяет выбирать, какие шрифты вы хотите использовать, а затем предоставляет необходимые файлы.

Но в локальном размещении шрифтов есть и свои недостатки. Когда вы загружаете шрифты в локальное хранилище, вы сохраняете их такими, какие они есть в данный момент. Если шрифты будут улучшены или обновлены, вы не получите эти изменения. Для сравнения, когда вы запрашиваете шрифты из Google Fonts API, вам всегда предоставляется самая последняя версия.

6. Отображение шрифта

Известно, что для загрузки шрифта Google браузеру требуется время. Но что будет с текстом, до того как шрифты будут готовы к использованию? Долгое время было так, что там, где должен находиться текст, браузер отображал пустое место.

Если ничего не показывать, то это может негативно сказаться на восприятии вашего сайта конечным пользователем. Было бы лучше в качестве запасного варианта использовать системный шрифт, а когда шрифт Google будет готов к использованию, просто «поменять» их. Это можно сделать при помощи CSS свойства font-display.

Добавляя значение font-display: swap; в декларацию @font-face, мы предписываем браузеру показывать запасной шрифт до тех пор, пока не станет доступен шрифт Google.

В 2019 году Google объявил, что добавляет поддержку font-display: swap. Для его использования достаточно добавить дополнительный параметр к URL шрифтов:

7. Используйте параметр Text

Малоизвестная особенность Google Fonts API – это параметр text. Этот редко используемый параметр позволяет загружать только те символы, которые вам нужны.

Например, если у вас есть текстовый логотип, который должен отображаться уникальным шрифтом, то вы можете при помощи параметра text загружать только символы, используемые в логотипе.

Это работает так:

Очевидно, что этот прием очень специфичен и имеет только несколько реалистичных сценариев использования. Однако, если вы сможете использовать его, он способен сократить вес загружаемого шрифта до 90%.

Примечание: По умолчанию при использовании параметра text загружается только вариант шрифта «Обычный». Чтобы использовать другой вариант, вы должны явно указать его в URL.

В заключение можно сказать, что практика показывает, что использование описанных выше приемов оптимизации оказывает на скорость загрузки веб-страницы самое значительное влияние и пренебрегать ими не стоит.

Источник