Ускорение сайтов: оптимизация подключаемых шрифтов
к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»
В этой статье мы обсудим важный аспект ускорения загрузки сайтов: подключаемые шрифты. На сегодняшний день большинство сайтов с профессиональным дизайном используют подключаемые шрифты: по данным httparchive.org это 60% из популярных сайтов.
Причина популярности загружаемых шрифтов понятна: это одно из самых мощных средств выражения стиля сайта. Однако, использование таких шрифтов не бесплатно с точки зрения скорости.
Способы подключения шрифтов
Для оптимизации процесса рассмотрим два основных способа подключения шрифтов. Первый – размещение на собственном сервере, второй – использование сервиса Google Fonts.
Локальное размещение шрифтов
Этот способ требует наличия файлов шрифтов на сервере рядом с сайтом. Адреса для загрузки в этом случае указываются относительно домена сайта, например: url(‘/fonts/pts-webfont.eot’).
Использование сервиса Google Fonts
В этом способе для подключения шрифтов достаточно получить код на сайте Google Fonts и разместить в шаблонах сайта. По идее это простой и беспроблемный способ, но он имеет свои недостатки.
Оптимизация процесса загрузки шрифтов
Нас больше всего интересует вопросы ускорения загрузки шрифтов и уменьшения их влияния на общий процесс загрузки сайта.
Основная проблема в том, что шрифты могут отложить отрисовку страницы или блоков текста на сайте. Существует несколько приёмов, которые позволяют получить максимальную производительность при использовании подключаемых шрифтов.
Сокращение объема файлов шрифтов
Самая логичная оптимизация: сократить количество байт, которые требуется передать для загрузки шрифта. Для этого есть несколько путей.
- Использовать наиболее продвинутый формат WOFF2 (до 30% экономии).
- Для форматов TTF, EOT, SVG использовать gzip-сжатие.
- Собирать шрифты только из необходимых наборов символов и начертаний.
- Установить кеширующие заголовки для файлов шрифтов с большим сроком хранения.
- Для редких случаев (заголовки, логотип) можно формировать файлы шрифтов по отдельным символам.
Большинство этих оптимизаций можно реализовать сервисами по конвертации шрифтов и настройками веб-сервера.
Ну и наконец, избавиться от шрифтов, которые выглядят как стандартные. Часто дизайнеры добавляют тонкие различия между шрифтами, хотя для обычного пользователя они неотличимы от обычных.
Сохранение шрифтов на сервере с сайтом
Если вы используете сервис для подключения шрифтов типа Google Fonts, то имеет смысл потратить немного времени и перенести шрифты на сервер. Дело в том, что для загрузки шрифтов через Google Fonts, браузер должен соединиться с еще одним сервером, загрузить с него CSS-файл и только потом подключиться к другому серверу для получения файлов шрифтов. Накладные расходы на эти подключения могут замедлить рендеринг шрифтов на сайте. Кроме того, функциональность сайта будет зависеть от стороннего бесплатного сервиса, качество работы которого никто не гарантирует.
Указание на файлы шрифтов нужно поставить как можно раньше в первом же CSS-файле, который будет загружаться.
Тонкие оптимизации: Font Loading API
Для полного контроля процессом загрузки шрифтов создана технология Font Loading API. На данный момент она поддерживается не во всех современных браузерах. С помощью этого API можно принудительно запускать загрузку шрифтов, управлять правилами показа контента до загрузки шрифтов и так далее. Подробнее об этом можно прочитать в руководстве для разработчиков Web Fundamentals.
Выводы
Использование подключаемых шрифтов в вебе стало стандартом, поэтому необходимо внимательно относиться к вопросу их оптимизации. В статье даны конкретные рекомендации по ускорению сайтов с подключенными шрифтами, однако нужно помнить о необходимости тестировать все изменения на сайте как с точки зрения функциональности, так и скорости.
Заказывая профессиональное ускорение сайта в Метод Лаб, вы получаете качественную оптимизацию подключаемых шрифтов и не только.
Простое подключение шрифтов в Adobe Muse
В этой статье мы подробнее рассмотрим возможности работы с текстом в программа Adobe Muse, типы и подключение шрифтов.
Типы шрифтов и добавление Typekit
В разделе «Текст» есть параметры и типы шрифтов: последние использованные шрифты, веб-шрифты, шрифты, соответствующие веб-палитре(те, которые правильно отображаются в устройствах), системные шрифты(те шрифты, которые есть у вас на компьютере, экспортируются в виде изображения, и не индексируются с помощью поисковых систем, значит Яндекс и Google не увидят текст и его не найдут люди). Нужно использовать не системные шрифты, а шрифты, соответствующие веб-палитре, либо веб-шрифты, которые подгружаются с сервера и позволяют использовать не стандартные версии.
Чтобы добавить шрифт, кликаем «Добавить веб-шрифты», открывается палитра Typekit (библиотека Adobe Muse, которая подключает нестандартные шрифты, отображающиеся в виде текста). Находим нужный шрифт здесь, и он автоматически подгружается.
Теперь выбираем его в библиотеке со шрифтами, он загружается к проекту. Теперь выбираем его в разделе «Веб-шрифты». Многие шрифты не поддерживают кириллические символы. Внизу я прикрепил таблицу со шрифтами, которые поддерживают кириллицу. Используйте ее и ни в коем случае не используйте шрифты, которые экспортируются в виде картинки. Они никак не индексируются поисковиками.
Как подключить Google Fonts
На сайте Google fonts, отфильтруйте шрифты по скрипту, выберите только кириллическое начертание. Если вы хотите использовать нестандартный шрифт, добавьте его в коллекцию «add to collection» нажмите « use», выберите нужные начертания. Из пункта «3. Add this code to your website» скопируйте код и вставьте в Adobe Muse в свойства страницы в html для head. Перейдите на новую строчку, нажмите Enter и напишите следующее: <style> Н1 {в скобках копируем всё из раздела «4»}< /style>.
Нажимаем ОК и выделяем текст, который редактируем и пишем что это h2 (заголовок). Таким образом мы указали соответствие между двумя заголовками.
Как подключить свой шрифт
Что бы установить в Adobe Muse шрифт со своего компьютера сначала скачайте его. Я рекомендую паблик Вконтакте. Здесь в меню выбираете кириллицу, выбираете подходящий шрифт и скачиваете.У большинства шрифтов есть правообладатель, но существуют и бесплатные, которые можно использовать в том числе и в коммерческих целях. Советую внимательно подходить к авторскому праву.
После загрузки, установите шрифт. На Mac и PC нажимите на кнопку «Установить шрифт». Нам нужно, что бы он установился в нескольких форматах. Для этого используй Online font converter Перенесите сюда шрифт в ttf формате. Нужно сделать формат eot, svg ,woff. Кликните на эти форматы, они конвертируются, после чего кликните на соответствующие кнопки.
Сохраните. У вас получится 3 архива, каждый распаковываете и забираете нужные файлы. Открываете Adobe muse и, выбрав инструмент «текст», набираете текст и идете в раздел «добавить веб-шрифты». В данном случае нам нужны локальные веб-шрифты. Нажимаете «добавить шрифты». Появляется окошко, где можно либо выбрать папку, либо перетащить файл. Я предпочитаю перетаскивать файлы. Выделяем нужные и перетаскиваем сюда. Нажимаю «Данные шрифты лицензированы» и «Продолжить». Появилась галочка, значит шрифт установился.
Иногда, шрифты скачиваются сразу с web-версиями, это упрощает работу, вам нужно установить ttf, а потом перетащить эти три файла к проекту в Muse.
Задание
- Скачайте исходный файл проекта.
- Попробуйте протестировать работу с Google Fonts
- Подключите свой шрифт к сайту и научитесь на его основе делать конвертацию шрифтов в Adobe Muse.
Выкладывайте в комментарии, что у вас получилось.
Тим Джуравич | Как шрифты на вашем веб-сайте могут повлиять на работу пользователей и как решить эту проблему
- Почему нам так нужны пользовательские шрифты?
- Как шрифты работают в Интернете
В 2009 году веб-шрифты появились в мире, когда браузер теперь поддерживает определений font-face в CSS, которые затем стали популярными с помощью проекта Typekit (теперь Adobe Fonts) и шрифтов Google.
До этого у вас был выбор только из 3-5 шрифтов, и некоторые бренды просто использовали изображения с текстом в них для создания фирменной типографики в веб-интерфейсах.
Не поймите меня неправильно, я тоже был виновен в этом (справа небольшой скриншот одного из моих стартапов в то время), вы должны любить текстуру дерева.
Лаура Уортингтон выразилась лучше всего, когда сказала: «Шрифт — это визуальный голос. Не читая, он передает свое сообщение », и это сообщение в большинстве случаев заключается в том, как вы связываете бренд вашего посетителя с вашим брендом.
При правильном использовании веб-типографика может:
- Дать значение торговой марки
- Определите, как кто-то воспринимает бренд
- Изменить восприятие и повысить узнаваемость бренда
Но даже в 2022 году с веб-шрифтами все еще будут проблемы, которые могут напрямую повлиять на работу конечных пользователей. Поскольку 68% веб-сайтов используют веб-шрифты, важно понимать некоторые факторы, влияющие на удобство использования. Чтобы добраться до сути проблемы, давайте начнем с обсуждения того, как шрифты работают в Интернете.
Веб-сайт хранит весь контент/текст в виде обычного текста и HTML, затем этому тексту необходимо указать, какой шрифт использовать для его отображения. Чтобы шрифт отображался, он должен быть либо на устройстве посетителя, либо доставлен вместе с веб-сайтом, чтобы браузер мог его интерпретировать.
Это определяется указанием веб-сайту, как отображать разные шрифты с использованием стека шрифтов , который определен в CSS следующим образом:
семейство шрифтов: «Century Gothic», Arial, Helvetica, без засечек;
Этот код в качестве примера попытается сначала использовать «Century Gothic».
Но примерно у 10-20% посетителей по всему миру нет этого шрифта, поэтому он будет пытаться загрузить Arial, затем Helvetica и, наконец, альтернативу без засечек.
Эта концепция иллюстрирует то, что считается веб-безопасный шрифт
Что это значит для нас?
При рассмотрении вопроса об использовании пользовательских или системных шрифтов необходимо определить, что, если шрифт недоступен, как он будет использовать другие шрифты, которые, как мы надеемся, установлены на устройстве.
При таком понимании у нас есть возможность рассмотреть возможность использования:
- Веб-шрифты , которые не устанавливаются в системе и могут быть пользовательскими, позволяют типографике бренда подключаться к бренду
- Системные шрифты , которые устанавливаются на устройство по умолчанию, позволяют типографике быть чрезвычайно читаемой и быстрой для отображения.
В оставшейся части этой статьи будет обсуждаться тонкий баланс между использованием шрифтов web и system .
Использование веб-шрифтов
Как и для рабочего стола, использующего новые шрифты, для браузера требуется шрифт с расширением .ttf , .otf или .woff , к сожалению, разные браузеры поддерживают разные расширения, хотя современные браузеры делают это проще.
Пользовательские шрифты должны быть преобразованы в эти многочисленные форматы и предоставлены для ссылки в HTML. Чтобы упростить эту задачу для дизайнеров и разработчиков, часто используются шрифты из Typekit, GoogleFonts или шрифты на основе значков из FontAwesome.
Эти технологии упрощают добавление пользовательских шрифтов, но создают серьезные проблемы.
Задача № 1: шрифты могут повлиять на производительность, что может повредить работе
Поскольку шрифты требуют сетевого запроса для загрузки файла шрифта, они могут стать блокирующими рендеринг
Основываясь на реализации шрифтов, он может заблокировать веб-страницу от показа чего-либо или может снизить пропускную способность, необходимую для загрузки критических частей вашей страницы. Это особенно важно, когда вы рассматриваете мобильные устройства с ограниченным количеством подключений.Возьмем, к примеру, этот снимок экрана, сделанный в ходе аудита производительности крупной компании электронной коммерции (их точные файлы отредактированы).
В этом примере показано, что 7 разных шрифтов загружаются до того, как отобразится фактическое содержимое веб-сайта.
Количество шрифтов и время их загрузки напрямую влияет на скорость визуализации, которая содержится в нескольких показателях Web Vital. Дизайны с тяжелыми изображениями и шрифтами могут замедлить скорость отклика веб-страницы, и это важно, потому что 53% мобильных пользователей покидают сайты, загрузка которых занимает более 3 секунд.
Рекомендация: Ограничьте количество используемых веб-шрифтов
Дизайн может выглядеть красиво в выбранном вами инструменте дизайна, но то, как он будет отображаться в Интернете, может сильно отличаться, поскольку вы видите, как это влияет на производительность.
Чтобы уменьшить влияние веб-шрифтов на производительность, я рекомендую ограничить указанные выше сгибы веб-шрифтов одним файлом. Оттуда, если требуется больше шрифтов, запланируйте их ленивую загрузку или загрузку ниже сгиба страницы.
Задача № 2: контент смещается при загрузке шрифтов, что раздражает пользователей
После того, как мы устраним некоторые проблемы с блокирующими шрифтами, нам нужно будет сосредоточиться на замене шрифтов по мере их загрузки. Ниже приведен пример веб-страницы с системным шрифтом по умолчанию слева и отложенной загрузкой шрифта справа.
Если это не так, замена со шрифта по умолчанию на веб-шрифт изменит весь макет страницы, это еще одна метрика Web Vital, называемая кумулятивным сдвигом макета.
Загрузка шрифтов может мешать взаимодействию, а также в целом расстраивать пользователя при взаимодействии с веб-сайтом.
Рекомендация: сопоставьте веб-шрифты с более часто поддерживаемыми системными шрифтами
Причина такого поведения подкачки заключается в том, что шрифты имеют дополнительные параметры, кроме размера, высоты строки, толщины, интервала между буквами, интервала между словами и т.
д. Часто веб-шрифт и системные шрифты полностью не синхронизированы.
Хорошей новостью является то, что это можно решить методом проб и ошибок, чтобы убедиться, что шрифты совпадают по этим параметрам.
Чтобы упростить эксперименты, я обычно использую Font Style Matcher, предоставленный Моникой Динкулеску.
Этот замечательный инструмент помогает визуализировать и настраивать эти параметры, чтобы разработчик мог их реализовать. Ниже приведен скриншот вывода инструмента.Проблема № 3: загрузка шрифтов от третьих лиц может создать проблемы с конфиденциальностью
Нестандартные решения для шрифтов часто используют сторонний домен для размещения шрифтов. Однако, поскольку это сторонний домен, эти решения вызывают серьезные опасения по поводу конфиденциальности.
20 января 2022 года суд в Германии постановил, что Google Fonts захватил IP-адреса, что считается нарушением GDPR. Чтобы решить эту проблему, веб-сайты, которые требуют соблюдения GDPR, требуют согласия перед подключением к сторонней системе, а это означает, что в течение определенного периода времени пользовательские шрифты вообще не будут загружаться.
Я вижу, что эта тенденция сохранится, поскольку многие бренды заботятся о конфиденциальности и соглашаются со своим опытом.
Рекомендация: самостоятельно размещайте шрифты, используя CDN
Эта проблема может быть одной из самых простых для решения. Если вы используете веб-шрифт, вам следует размещать файлы самостоятельно, а не использовать сторонний CDN. Это потребует дополнительной работы по разработке, но стоит усилий, чтобы избежать проблем с соблюдением GDPR.
Использование системных шрифтов
До сих пор мы много говорили о веб-шрифтах, но даже при использовании веб-шрифта вам может потребоваться откат к системным шрифтам, если пользовательский шрифт не загружается.
В качестве примера использования только системных шрифтов этот веб-сайт полностью полагается на стек браузера устройства для выбора наиболее читаемого шрифта в зависимости от устройства пользователя.
Это невероятно полезно на этом сайте, потому что делает контент наиболее читаемым на целевом устройстве и не требует вызовов пользовательских шрифтов.
Это может быть очень полезно для основного содержимого в сочетании с веб-шрифтами, чтобы сделать содержимое читабельным и производительным.
Для исследования некоторых «веб-безопасных» системных шрифтов я предпочитаю использовать стек шрифтов CSS, который содержит высокоуровневую поддержку и покрытие для разных платформ.
Если вам интересно, этот веб-сайт следует шаблону стека системных шрифтов.
Прощальные мысли
Пользовательские шрифты прекрасно подходят для связи ключевых элементов веб-интерфейса с брендом, но я рекомендую использовать их экономно и в соответствии с некоторыми приведенными выше рекомендациями.
Дополнительные показания
- Рекомендации по использованию шрифтов
- История веб-шрифтов
Как веб-шрифты могут улучшить пользовательский магазин электронной коммерции вашего клиента — разработка внешнего интерфейса
Независимо от того, создаете ли вы тему с нуля или редактируете существующую тему для клиента, скорее всего, вам придется принимать решения о том, какие шрифты включить в вашей теме.
Типографика оказывает огромное влияние на то, как клиенты воспринимают интернет-магазины, а четкий, дополняющий текст придаст вашим нестандартным магазинам профессиональный вид.
Веб-сайты могут иметь широкий спектр контента на странице, включая видео и изображения, однако тексту обычно уделяется огромное внимание, и ваша работа, как дизайнеров тем, заключается в том, чтобы выбрать правильные шрифты для вашего клиента. В этой статье мы рассмотрим, как можно добавлять шрифты в темы Shopify, а также какие рекомендации следует учитывать при работе с типографикой.
Вам также может понравиться: Спаривание шрифтов для дизайнеров 101, а также 10 бесплатных инструментов сопряжения шрифтов.
Шрифты 2.0
Если вы хотите, чтобы пользовательские магазины выделялись заметным текстом, вероятно, вы рассмотрите возможность использования веб-шрифтов, чтобы добавить характер и стиль сайту вашего клиента. Используя веб-шрифты, вы можете открыть мир новых вариантов шрифтов, а не ограничиваться ограниченным диапазоном, предлагаемым обычными шрифтами.
Используя веб-шрифты, вы можете открыть целый мир новых вариантов шрифтов, а не ограничиваться ограниченным диапазоном, предлагаемым обычными шрифтами.
В наши дни клиенты ожидают увидеть на веб-сайтах динамичную и интересную типографику, а не устаревшие шрифты, такие как Times New Roman. Позволяя разработчикам выбирать из широкого набора пользовательских шрифтов, веб-шрифты избавляют от необходимости полагаться на ограниченное количество шрифтов, установленных пользователями на их компьютерах.
В отличие от обычных настольных шрифтов, веб-шрифты не хранятся локально на компьютере пользователя, а загружаются на страницу через стороннего поставщика. Существует ряд различных хостингов, которые предоставляют бесплатные или платные веб-шрифты, включая Google Fonts, Typekit и Font Squirrel.
После того, как вы нашли шрифты, подходящие для темы, которую вы разрабатываете, вы можете сгенерировать код, который вы добавите в свою тему.
Это позволяет вам назначать новые пользовательские шрифты различным текстовым элементам в редакторе тем. После того, как все настроено и у вас есть все необходимые шрифты, ваш клиент может выбирать комбинации, которые ему нравятся, прямо в редакторе тем.
FOUT против FOIT
Наличие набора новых интересных веб-шрифтов открывает множество возможностей, однако стоит помнить, что, поскольку эти шрифты не хранятся на вашем сайте, могут возникнуть проблемы с загрузкой этих шрифтов.
Одним из недостатков использования веб-шрифтов является то, что посетители сайта могут столкнуться с тем, что называется Flash Of Unstyled Text (FOUT), когда загружается резервный шрифт, или Flash Of Invisible Text (FOIT), когда текст не виден. пока не загрузится веб-шрифт.
Слева мы видим загрузку веб-страницы, но веб-шрифты еще не загружены, поэтому мы видим Flash Of Invisible Text (FOIT). Это может произойти при медленном подключении к Интернету или мобильным сетям, и браузеры могут вести себя по-разному при загрузке веб-шрифтов.
Internet Explorer и Edge будут полностью скрывать текст перед загрузкой веб-шрифта, в то время как Chrome и Firefox будут отображать резервный шрифт в процессе загрузки.
Чтобы ваш текст отображался во всех браузерах, рекомендуется назначить всему тексту резервный «безопасный» шрифт после веб-шрифта. Это будет обычный шрифт, такой как Arial или Helvetica, предварительно загруженный на все компьютеры. В таблице стилей это будет выглядеть так:
ч2 {
размер шрифта: 2em;
поле: 0,67em 0;
семейство шрифтов: мой-пользовательский-шрифт, Arial, Helvetica;
} WebsiteSetup предоставляет полезный список других возможных безопасных шрифтов.
Споры между FOUT и FOIT продолжаются в Интернете, и обе стратегии имеют свои преимущества и недостатки. Хотя резервный шрифт действительно загружается с помощью FOUT, это может означать, что макет страницы будет изменен после загрузки веб-шрифта, что приведет к моменту, когда элементы на странице изменят положение. Этот эффект может сбивать с толку посетителей и вызывать повышенный показатель отказов.
Одним из методов минимизации искажения страницы может быть выбор резервного шрифта с аналогичным размером и весом, чтобы при загрузке веб-шрифта макет не перемещался так сильно.
FOIT, с другой стороны, не изменяет макет страницы, однако это означает, что, в зависимости от подключения пользователя, могут быть моменты, когда на странице отсутствует важный контент. Хотя форма страницы остается статической во время процесса загрузки, можно утверждать, что пользователь страдает от необходимости ждать, прежде чем он сможет прочитать какой-либо текст. В случаях, когда соединение очень плохое, веб-шрифт может вообще не загружаться, и в этом случае страница может оказаться бесполезной.
Опыт FOIT и FOUT — это цена, которую приходится платить за гибкость использования веб-шрифтов. Файлы, расположенные в сторонних службах, могут загружаться медленно, что более заметно при слабом сетевом подключении или мобильных устройствах. Хороший способ проверить, как загружаются ваши шрифты, — использовать Google Inspect Tool для имитации более медленной скорости соединения.
На вкладке «Производительность» есть параметр дроссельной заслонки, который позволяет вам имитировать определенные скорости — например, сеть 2G.
Инструмент проверки элементов имеет возможность регулировать скорость сети, чтобы вы могли проверить, как веб-шрифты загружаются при медленных соединениях.
Как добавить пользовательские веб-шрифты в Slate
Если вы создаете тему с нуля с помощью Slate, вы увидите, что в теме нет предварительно загруженных шрифтов. Это сделано намеренно и дает разработчикам полную свободу действий в отношении того, как будет выглядеть их магазин и какие шрифты они выберут. Одним из наиболее распространенных способов добавления шрифтов в пустую тему является Google Fonts, который предоставляет бесплатные и привлекательные шрифты и относительно прост в реализации.
Во-первых, вы должны создать подключение к Google Fonts API, создав новый файл (google-fonts.liquid), содержащий этот код, в папку с фрагментами:
Затем вам нужно будет включить ссылку на этот файл в раздел head.
вашего файла theme.liquid , чтобы шрифты загружались на каждой странице нашей темы:
{% if page_description %}
{% конец%}
{% включают 'социальные мета-теги' %}
{{ 'theme.scss.css' | актив_url | stylesheet_tag }}
{% включают "шрифты Google" %} В этом случае я добавил его чуть ниже, где появляется таблица стилей.
После этого мы можем начать добавлять пользовательские шрифты Google в наш файл settings_schema.json, чтобы они отображались в редакторе тем. Как только они будут добавлены, их можно будет выбрать в палитре шрифтов в редакторе тем. Вы добавите их в файл settings_schema.json. В данном случае я выбираю некоторые популярные веб-шрифты, такие как Lato и Helvetica Neue, а также некоторые другие более стилизованные шрифты, такие как Alice.
В settings_schema.json:
Наконец, вам нужно будет подключить шрифты в CSS, чтобы разные элементы HTML могли выглядеть как шрифты, назначенные в редакторе тем.
В приведенном ниже коде используются выбранные типы настроек в сочетании с некоторой пользовательской логикой Liquid и переменными Sass для загрузки шрифтов Google.
Если вы используете Slate, в файле variable.scss.liquid добавьте:
Вам также может понравиться: Начало работы с Slate за 4 простых шага.
Если вы не используете Slate, вы можете добавить приведенный выше код в свою таблицу стилей, например theme.scss.liquid
Теперь, когда элементу HTML назначается семейство шрифтов в редакторе тем, эти настройки назначаются переменной Sass, такой как $font-stack-body или $font-stack-header .
Например, в таблице стилей я установил семейство шрифтов из h2 и h3 на $font-stack-header и семейство шрифтов из от до $font-stack-body .
Они ссылаются через код в таблице стилей на настройки темы и учитывают изменения, которые я делаю в редакторе темы.
Будущее шрифтов
Во время Unite 2017 было объявлено, что выбор шрифтов Shopify будет улучшен благодаря обновленному подходу к шрифтам. Помимо партнерства с Monotype, чтобы сделать больше доступных шрифтов, пользовательские веб-шрифты будут загружаться с использованием событий прокрутки JavaScript для загрузки и мониторинга веб-шрифтов.
Во время Unite 2017 было объявлено, что выбор шрифтов Shopify будет улучшен благодаря обновленному подходу к шрифтам.
После этого обновления браузеры могут определять, загружались ли ранее пользовательские шрифты, с помощью файлов cookie. Если пользовательский шрифт кэшируется в браузере, его можно загрузить без использования полосы пропускания для подключения к стороннему хосту. Используя этот метод, шрифты могут предоставляться либо службой шрифтов, такой как Google Fonts, Typekit и Webtype, либо размещаться на собственном хостинге, что добавляет уже доступный уровень гибкости.
Благодаря этому обновлению мы будем знать, когда шрифты загружаются, загружаются или дают сбой, что, в свою очередь, дает возможность выбрать, будут ли шрифты вашего сайта загружаться через процесс FOUT или FOIT, а не определяться браузером. тип.
При создании пользовательских тем вы сможете принимать обоснованные решения, будут ли шрифты отображаться временно как резервные или невидимые. Если, например, сам текст не является основным направлением сайта, а изображения важнее, вы можете выбрать загрузку шрифтов с помощью FOIT, чтобы избежать реструктуризации страницы.
Установив правила с использованием нового класса загрузки шрифтов , вы можете реализовать FOIT или FOUT из кода вашей темы. Это новое обновление шрифтов будет доступно позже в этом году.
Вам также может понравиться: Создание динамических цветовых схем с параметрами темы и предустановками.
Типографика — король!
Как видите, существует множество различных способов внедрения шрифтов в ваши пользовательские темы и предоставления клиентам наиболее подходящих вариантов.