Веб-шрифты: как заставить их отлично работать в электронной почте

Опубликовано: 2021-04-24

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

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

В этом сообщении блога я расскажу:

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

Веб-шрифты и веб-безопасные шрифты

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

Когда ваша электронная почта закодирована, шрифт объявляется с помощью свойства CSS, называемого font-family. Это свойство font-family может иметь только одно имя шрифта или несколько имен шрифтов, часто называемых стеком шрифтов. Включение нескольких названий шрифтов гарантирует, что, если один шрифт не работает, будет использоваться запасной или резервный шрифт по вашему выбору. Не перечисляя несколько названий шрифтов, почтовый клиент может выбрать ваш резервный шрифт. Когда подписчики открывают вашу электронную почту, браузер считывает свойство font-family и выбирает шрифт для использования.

Веб-безопасные шрифты

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

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

Очевидные веб-безопасные шрифты:

Arial
Helvetica
Вердана
Грузия
Times New Roman

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

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

Веб-шрифты

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

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

Почему веб-шрифты?

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

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

Пример веб-шрифтов с изображениями и без них по электронной почте Ace Hardware — Электронная почта с изображениями и без них при использовании веб-шрифтов

Пример электронного письма Magic Spoon для веб-шрифтов с изображениями и без них — Электронная почта с изображениями и без них при использовании текста в изображениях

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

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

Могу ли я использовать веб-шрифты в электронной почте?

Если вы еще не догадались, ответ - да! Но, как и во всем, что касается электронной почты, есть предостережения.

Поддержка почтового клиента

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

Почтовый клиент	Поддержка веб-шрифтов
Apple Mail	✓ Да
Outlook 2007-2016	✘ Нет
Outlook 2019	✘ Нет *
Outlook для Mac	✓ Да
Outlook Office 365	✘ Нет *
Приложение Gmail	✘ Нет *
iOS	✓ Да
Приложение Outlook	✘ Нет
Почта Samsung	✘ Нет *
Почта AOL	✘ Нет
Gmail	✘ Нет *
Office 365	✘ Нет
Outlook.com	✘ Нет
Yahoo! Почта	✘ Нет

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

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

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

Какие почтовые клиенты используют ваши подписчики?

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

Узнать больше →

Лицензирование

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

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

Где найти веб-шрифты

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

Некоторые шрифты читаются легче, чем другие.

Богато украшенные или декоративные шрифты, такие как дисплейные или рукописные шрифты, могут затруднить людям с нарушениями зрения или дислексией различие между формами букв. Шрифты без засечек (шрифты без расширенных элементов или завитков букв, такие как Arial, Calibri, Century Gothic или Helvetica) и плоские шрифты (шрифты с более толстыми линиями, такие как Museo Slab и Rockwell) считаются более доступными.

Вот несколько хороших мест для начала поиска.

Google шрифты

Доступно множество сервисов веб-шрифтов, но Google Fonts - наш фаворит. Услуга полностью бесплатна, и вы можете загрузить веб-шрифты на свой компьютер, если вы создаете макеты дизайна в Adobe Photoshop, Sketch или другом программном обеспечении для дизайна.

Adobe шрифты

Typekit стал Adobe Fonts с октября 2018 года. Теперь они поддерживают как метод <link>, так и метод @import для использования шрифтов в качестве веб-шрифтов (подробнее об этом далее). Услуга не является полностью бесплатной, но если у вас уже есть подписка на Creative Cloud, она включена в нее.

Службы веб-шрифтов

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

Тип Сеть (веб-лицензия)
Тип процесса Foundry (веб-лицензия)
Optimo (лицензия на цифровую рекламу)
Fontspring (Пользовательская лицензия по электронной почте)
Typotheque (веб-лицензия)
Тип продукции (Лицензия на интернет-рекламу)
MyFonts (веб-лицензия)
Коммерческий тип (веб-лицензия)

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

Как встраивать веб-шрифты в электронные письма

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

1. Получите URL-адрес файла шрифта.

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

Если вы используете Google Fonts, найти URL-адрес немного сложно, но не так уж сложно. Узнайте, как на следующем шаге использовать метод встраивания @ font-face.

2. Импортируйте веб-шрифт одним из трех способов.

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

<ссылка>
@Импортировать
@ font-face

Так почему бы вам выбрать один метод вместо другого?

Метод @import откладывает загрузку импортируемого веб-шрифта до полной загрузки HTML-кода, в который он встроен. Это может привести к тому, что вашему веб-шрифту потребуется немного больше времени, чтобы отображаться в вашем электронном письме, в то время как остальная часть письма будет загружена. И наоборот, метод <link> загружает ресурс встроенным образом при чтении кода HTML-файла (сверху вниз), что может задержать загрузку вашего электронного письма, если ваш файл веб-шрифтов особенно велик.

Еще одна вещь, о которой следует помнить при выборе метода, - это то, что поддерживает ваш ESP.

Вы можете создать красивый код, который будет работать в Litmus в течение всего дня, но если ваш ESP изменит ваш код, как мы знаем, большинство из них, то все ваши действия не будут иметь значения. Убедитесь, что ваш ESP не изменяет ваш код таким образом, чтобы ваши шрифты перестали работать. В Litmus наш ESP не позволяет нам включать условные выражения MSO вокруг элементов стиля. Таким образом, методы <link> и @import не будут работать для нас, поскольку они плохо поддерживаются в Outlook, о чем мы поговорим ниже.

Использование <link>

Использование метода <link> - относительно простой метод встраивания шрифтов в вашу электронную почту. Поместите эту строку кода в <head> вашего электронного письма, вверху:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Использование @import

Метод @import также относительно простой. Поместите эту строку кода в <head> вашего электронного письма между тегами <style>:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Использование @ font-face

Онлайн-сервисы веб-шрифтов обычно предлагают на выбор пять форматов файлов: .eot, .woff, .woff2, .svg и .ttf. Форматы .woff и .woff2 имеют лучшую поддержку, когда дело доходит до электронной почты, поэтому мы рекомендуем по возможности использовать один или оба этих формата. Метод @ font-face - единственный метод, который позволяет вам конкретно выбирать, какой формат файла вы хотите импортировать, что делает его наиболее надежным методом внедрения веб-шрифтов.

Вот типичное объявление @ font-face для импорта веб-шрифта в электронную почту с использованием Google Fonts в качестве выбранной нами службы веб-шрифтов:

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Если вы используете Google Fonts, найти код @ font-face не так просто, но и не так уж сложно.

Во-первых, вам нужно найти шрифт, который вы хотите использовать в Google Font. Затем выберите стиль, который хотите использовать. Справа появится всплывающее меню.

googe_fonts

Во всплывающем меню будет выбор для <link> или @import. У обоих будет URL-адрес (выделен на скриншоте выше). Вы можете скопировать этот URL-адрес и вставить его в адресную строку браузера, чтобы найти таблицу стилей CSS, которую использует Google.

google_font_api

Скопируйте и вставьте "латинскую" версию @ font-face между тегами <style>.

В Litmus метод @ font-face - это наша основная реализация импорта веб-шрифтов в наши электронные письма.

Вся заслуга в этом методе импорта веб-шрифтов принадлежит защитнику доступности электронной почты Полу Эйри, как подробно описано в предыдущем информационном бюллетене Type: E.

3. Выберите подходящий резервный шрифт.

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

У каждого почтового клиента есть шрифт по умолчанию, если шрифт, указанный в стеке семейства шрифтов, недоступен. Например, Gmail использует Arial, Apple Mail использует Helvetica, а Outlook использует Times New Roman. Если вам не нравится звук любого из этих шрифтов по умолчанию, у нас есть хорошие новости - вы можете выбрать резервный шрифт при кодировании в стеке семейства шрифтов (на следующем шаге).

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

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

Вы можете сделать еще один шаг вперед, проанализировав высоту шрифтов по оси x.

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

пример сравнения высоты по оси x verdana, arial и проксиманова

Вот пример тонких различий в высоте по оси x между шрифтами Verdana, Arial и веб-шрифтом Proxima Nova. Эти тонкие различия могут иметь решающее значение в создании или разрушении дизайна электронной почты, когда веб-шрифты не отображаются.

4. Используйте свои шрифты в электронной почте.

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

font-family: 'Roboto', Verdana, sans-serif;

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

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

5. Избегайте искусственного полужирного и искусственного курсива.

Если у вас есть сопутствующие жирным шрифтом и курсивом версии ваших файлов веб-шрифтов, давайте их использовать!

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

В принципе, НЕ делайте этого:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Как и в случае с веб-дизайном, вы можете использовать настоящие шрифты, включив эти стили в свой стек @ font-face, например:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Как видите, разные стили используют разные шрифты независимо от семейства шрифтов. Таким образом, если вы стилизуете свой шрифт в HTML следующим образом:

style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

… Тогда он будет использовать настоящий шрифт Roboto-BoldItalic ! Аналогично, просто добавив font-weight: bold; выведет «Roboto-Bold» и просто добавит font-style: italic; потянет "Roboto-Italic" .

И НЕ делайте этого!

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

@font-face {
font-family: 'Roboto Bold Italic';
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}
style="font-family: 'Roboto Bold Italic', Verdana, sans-serif;"

Это представляет проблему. Использование имен семейств шрифтов для хранения стилей не только создает чрезмерно сложный и избыточный CSS, но также лишает ваш текст стиля, если срабатывают ваши запасные варианты. Так, например, - если вы просматриваете приведенный выше код в Gmail (что не t поддерживает пользовательские веб-шрифты), то вы увидите только шрифт Verdana без полужирного и без курсива вместо Roboto Bold Italic .

Разделяя семейство шрифтов и веса или стили шрифтов, резервные шрифты по-прежнему сохранят правильный стиль.

6. Используйте исправление для Outlook.

В Outlook есть замечательная причуда, на которую стоит обратить внимание. Особенно, если этим пользуются многие ваши подписчики.

Посмотрите, как ваши электронные письма выглядят в Outlook и не только

У каждого почтового клиента есть свои особенности. К счастью, вы можете увидеть их в своих сообщениях электронной почты до того, как нажмете кнопку «Отправить» - с помощью Litmus Email Previews. Больше никаких сломанных писем.

Узнайте как →

Если вы используете метод <link> или @import, все до Outlook 2019 будет отображать Times New Roman независимо от того, какие резервные варианты вы добавили для своего шрифта.

Самый простой способ исправить это - использовать метод @ font-face. Но если вам нужно использовать метод <link> или @import, используйте условные выражения Microsoft Office (MSO), чтобы закомментировать этот раздел ваших стилей. Это не позволит Outlook их увидеть, и он будет использовать ваши резервные шрифты по назначению:

Без условных выражений MSO	С условными операторами MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Но подождите минутку. Я только что сказал все до Outlook 2019. Итак, что происходит в Outlook 2019 (и Outlook Office 365)? Что ж, в этих почтовых клиентах Outlook возвращается к резервному варианту даже без условных выражений MSO.

Без условных выражений MSO	С условными операторами MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Фактически, в этих клиентах @import действительно работает! Но так ли это на самом деле? Мы пробовали это с другими шрифтами, и результаты были примерно такими же, как и от Outlook:

тестирование веб-шрифтов в Outlook

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

Между тем, по указанным выше причинам - и поскольку вы не можете настроить таргетинг только на Outlook 2019 - лучше всего использовать @ font-face или скрыть свои объявления <link> или @import.

Если вы обнаружите, что Outlook конвертирует ваш шрифт в Times New Roman, вы можете добавить mso-font-alt: 'Arial'; в блок @ font-face, чтобы обеспечить альтернативный откат для Outlook:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Еще одно решение, которое вы могли бы использовать, - это кодирование семейства шрифтов с использованием встроенного стека веб-безопасных шрифтов и включение блока <style> для переопределения шрифтов веб-шрифтом. Тогда просто нужно скрыть этот блок стиля из Outlook:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Используйте исправление для Gmail (шучу, его нет)

Итак, вы можете спросить: «А как насчет Gmail? Мы используем Google Fonts после всех «.

Вы могли подумать, что, поскольку Gmail - это продукт Google, а Google Fonts - это продукт Google, они прекрасно сочетаются друг с другом. Но, увы, это не так.

Веб-шрифты не работают в Gmail, даже если они являются шрифтами Google и даже если вы используете код, предоставленный Google. Единственное исключение - Roboto:

Использование разных шрифтов Google	Использование разных методов встраивания

Фактически, в приложении Gmail Mail на Android все шрифты без засечек возвращаются к Roboto:

Использование разных шрифтов Google	Использование разных методов встраивания

Некоторое вдохновение для начала

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

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

С веб-шрифтами	С запасными вариантами

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

электронная почта webflow

Оставайтесь безупречными и безошибочными

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

Всегда проверяйте!

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

QA тестируйте веб-шрифты в ваших письмах

Вы все сделали правильно? Узнайте это с помощью бесплатной пробной версии Litmus. Просматривайте, как ваши электронные письма выглядят в более чем 90 почтовых клиентах, приложениях и устройствах. И поддерживайте репутацию своего бренда с помощью безупречных электронных писем.

Начать бесплатную пробную версию Litmus →

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

Первоначально опубликовано 11 апреля 2019 г., автор: Jaina Mistry. Последнее обновление: 23 апреля 2021 г.