Как веб-шрифты могут улучшить магазин электронной коммерции вашего клиента

  1. Шрифты 2.0
  2. FOUT vs. FOIT
  3. Как добавить пользовательские веб-шрифты в Slate
  4. Будущее шрифтов
  5. Типография - король!

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

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

Вам также может понравиться: Сопряжение шрифтов для дизайнеров 101, плюс 10 бесплатных инструментов сопряжения шрифтов ,

Шрифты 2.0

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

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

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

В отличие от обычных настольных шрифтов, веб-шрифты не хранятся локально на компьютере пользователя, а загружаются на страницу через стороннего поставщика. Существует ряд различных хостов, которые предоставляют бесплатные или платные веб-шрифты, включая Google Fonts , Typekit , а также Шрифт Белка ,

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

FOUT vs. FOIT

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

Одним из недостатков использования веб-шрифтов является то, что посетители сайта могут столкнуться с тем, что называется Flash Of Unstyled Text (FOUT), где загружается резервный шрифт, или Flash Of Invisible Text (FOIT), где текст не виден до веб-шрифт загружается.

Слева мы видим загрузку веб-страницы, но веб-шрифты еще не загружены, поэтому мы видим Flash Of Invisible Text (FOIT).

Это может происходить при медленном интернет-соединении или мобильных сетях, и браузеры могут работать по-разному во время загрузки веб-шрифтов. Internet Explorer и Edge полностью скрывают текст перед загрузкой веб-шрифта, а Chrome и Firefox покажут запасной шрифт во время загрузки.

Чтобы текст отображался во всех браузерах, рекомендуется, чтобы резервный «безопасный» шрифт был назначен всему тексту после веб-шрифта. Это будет обычный шрифт, как Arial или же Helvetica , то есть предварительно загружен на все компьютеры. Это будет выглядеть так в таблице стилей:

h1 {font-size: 2em; маржа: 0,67em 0; семейство шрифтов: my-custom-font, Arial, Helvetica; }

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

Дебаты между FOUT и FOIT - это постоянная дискуссия в Интернете, и обе стратегии имеют свои преимущества и недостатки. Хотя резервный шрифт загружается с FOUT, это может означать, что макет страницы будет корректироваться после загрузки веб-шрифта, что приведет к тому, что элементы на странице изменят свое положение. Этот эффект может сбивать с толку посетителей и может привести к увеличению показателя отказов. Одним из способов минимизации искажений страницы может быть выбор запасного шрифта, который имеет одинаковый размер и вес, чтобы при загрузке веб-шрифта макет не перемещался так сильно.

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

Опыт FOIT и FOUT - это цена, которую нужно заплатить за гибкость использования веб-шрифтов. Файлы, расположенные в сторонней службе, могут загружаться медленно, что более заметно на слабых сетевых подключениях или мобильных устройствах. Хороший способ проверить, как загружаются ваши шрифты - это использовать Инструмент проверки Google моделировать более медленные скорости соединения. На вкладке «Быстродействие» есть опция газа, которая позволяет имитировать определенные скорости - например, сеть 2G.

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

Как добавить пользовательские веб-шрифты в Slate

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

Во-первых, вы должны создать соединение с Google Fonts API, создав новый файл (google-fonts.liquid), содержащий этот код, в папку с фрагментами:

Затем вам нужно будет включить ссылку на этот файл в разделе заголовка вашего файла theme.liquid, чтобы шрифты загружались на каждой странице нашей темы:

{% if page_description%} <meta name = "description" content = "{{page_description | escape}}"> {% endif%} {% include 'social-meta-tags'%} {{'theme.scss.css '| asset_url | stylesheet_tag}} {% include 'google-fonts'%}

В этом случае я добавил его чуть ниже, где появляется таблица стилей.

После этого мы можем начать добавлять Google пользовательские шрифты в наш файл settings_schema.json, чтобы они появлялись в редакторе тем. Как только они будут добавлены, они станут доступными для выбора в средстве выбора шрифтов в редакторе тем. Вы добавите их в settings_schema.json файл. В этом случае я выбираю некоторые популярные веб-шрифты, такие как Lato и Helvetica Neue, а также некоторые другие более стилизованные шрифты, такие как Алиса ,

В settings_schema.json:

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

Если вы используете Slate, в вашей переменнойs.scss.liquid добавьте:

Вам также может понравиться: Начало работы со Slate за 4 простых шага ,

Если вы не используете Slate, вы можете добавить приведенный выше код в таблицу стилей, например, в theme.scss.liquid.

Теперь, когда элементу HTML назначено семейство шрифтов в редакторе тем, эти параметры назначаются переменной Sass, такой как $ font-stack-body или $ font-stack-header.

Например, в таблице стилей я установил семейство шрифтов h1 & h2 равным $ font-stack-header, а семейство шрифтов a - $ font-stack-body.

Они возвращаются через код в таблице стилей к настройкам темы и будут учитывать изменения, которые я делаю в редакторе тем.

После того, как вы назначите веб-шрифты элементам в Slate, вы можете выбрать шрифты в редакторе темПосле того, как вы назначите веб-шрифты элементам в Slate, вы можете выбрать шрифты в редакторе тем.

Будущее шрифтов

Это было объявлено во время Объединяйтесь 2017 выбор шрифта в Shopify будет улучшен благодаря обновленному подходу к шрифтам. Так же как партнерство с монотипом чтобы сделать больше доступных шрифтов, пользовательские веб-шрифты будут загружаться с использованием событий прокрутки JavaScript для загрузки и мониторинга веб-шрифтов.

Во время Unite 2017 было объявлено, что выбор шрифтов в Shopify будет улучшен благодаря обновленному подходу к шрифтам.

После этого обновления браузеры могут определять, загружались ли ранее пользовательские шрифты, с помощью файлов cookie. Если пользовательский шрифт кэшируется в браузере, его можно загрузить без использования полосы пропускания для подключения к стороннему хосту. Используя этот метод, шрифты могут предоставляться либо службой шрифтов, такой как Google Fonts, Typekit и Webtype, либо быть размещенными самостоятельно, что добавляет уровень гибкости, который уже доступен.

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

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

Устанавливая правила с помощью нового класса загрузки шрифтов, вы можете реализовать FOIT или FOUT из кода вашей темы. Это новое обновление шрифтов будет доступно позже в этом году.

Вам также может понравиться: Создание динамических цветовых схем с опциями и настройками темы ,

Типография - король!

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

Хотя веб-дизайнеры и маркеры часто говорят, что «контент - это король» если ваш контент отображается нечетко и читабельно, ваше сообщение не будет услышано , Это делает вашу работу в качестве разработчика, чтобы рассмотреть лучшие методы и веб-шрифты для каждого отдельного сайта.

Какие типы веб-шрифтов и способы загрузки вы предпочитаете? Дайте нам знать в комментариях ниже.

Какие типы веб-шрифтов и способы загрузки вы предпочитаете?