Полезное

Шрифты в рассылках

Как сделать так, чтобы было красиво и ничего не слетало + как настроить свой шрифт в блочном редакторе Mailganer

Какие шрифты используют в имейл-рассылках

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

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

Sans serif или без засечек:

Arial
Arial Black
Helvetica
Lucida
Sans
Tahoma
Trebuchet
MS
Verdana

Serif или с засечками:

Georgia
Times New Roman
Courier

Самый популярный кроссплатформенный шрифт с засечками — Times New Roman, а без засечек — Arial. Каждый из них также может иметь разное начертание (жирный, курсив).

Web-safe шрифты. Источник: Google Fonts

Где на вёрстке указывается шрифт?

Шрифт прописывается при вёрстке рассылки в коде в теге style при помощи команды font-family. Нужно указать название шрифта и его тип. Например:

<style>
   h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
   } 
   p {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
   }
  </style>

Медиа-запросы в HTML-коде

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

Примените на вёрстке медиа-запрос @import и укажите ссылку на постоянный файл со шрифтом. Так это выглядит в коде:

<style type="text/css"> 
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,900&subset=cyrillic'); 
p { 
font-family: 'Roboto', Arial, sans-serif; 
} 
</style>

В параметре font-family должен быть прописан шрифт, который нужно использовать (в примере — Arial, sans-serif), если система не нашла желаемый шрифт (Roboto) или скачать его (не смогла обратиться за ним к стороннему файлу).

Если не задать это условие, пользователь увидит пустые квадраты вместо текста.

Media queries для российского сегмента сейчас поддерживаются всего в двух клиентах: mail.ru и gmail.com.

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

iOS предустановленное приложение

Приложение Outlook

Android предустановленное приложение

Приложение Mail.ru

Приложение Яндекс

Приложение Gmail

Поддержка медиазапроса

Где просматривают письмо

Мобильный браузер (Safari, Chrome и т. д.)

✅

Gmail

Mail.ru

✅

Apple Mail

Веб-версии и программы

Мобильные устройства

✅

❌

Яндекс Почта

Outlook 2019, 2021

❌

Что важно помнить: письмо можно открыть в другом почтовом клиенте, где контент отобразится корректно.

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

Подставляя свои шрифты c помощью медиа-запросов нужно понимать, что они сработают не во всех случаях. Даже если рассылку написать шрифтом Roboto, то он корректно будет отображаться только у подписчиков mail.ru и gmail.com.

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

Настройка шрифта в блочном редакторе Mailganer

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

Изменить шрифт можно в настройках всего блока или содержимого блока.

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

Использование нестандартного шрифта в рассылке

По умолчанию в Mailganer можно использовать только стандартные шрифты. Это связано с защитой прав правообладателей шрифтов.

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

Чтобы снизить юридические риски, мы «разрешаем» использовать для обращения к шрифтам только ссылки, расположенные вне домена mailganer.

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

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

Самый популярный открытый источник бесплатных официальных шрифтов — Google Fonts. Именно к нему «обращаются» в большинстве случаев. Делают это с помощью медиа-запроса и постоянной ссылки на этот шрифт.

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

Таблица поддержки нестандартных шрифтов

Gmail

Outlook App

Yahoo! Mail

Outlook 2013-2021

Samsung Mail

Outlook Office 365 (Win & Mac)

Поддержка нестандартного шрифта

Почтовый клиент

Outlook.com

Gmail App

✅

Apple Mail

iOS

✅

Outlook for Mac

❌

AOL Mail

Windows 11

❌

Office 365

❌

Яндекс Почта

Mail.ru

❌

Google заменяет шрифты на Roboto sans-serif на Android, а в iOS — на Helvetica.

Информация взята из исследования Litmus по шрифтам в рассылках.

Как правильно прислать ссылку на шрифт

Шаг 1. Подготовьте ссылку на постоянное место хранение шрифта и скопируйте её url. Пример ссылки:

https://static.tildacdn.com/tild3462-3737-4833-a365-626237633137/RF-Dewi-Regular.woff2

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

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

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

Шаг 2. Создайте обращение в поддержку с запросом «Подключите шрифт в конструктор, вот ссылка на шрифт» — и мы подключим его в ваш аккаунт.

Если нужна помощь — напишите обращение в поддержку или на support@mailganer.ru

Понятно пишет о сложных вещах в разъяснительной Mailganer. Работает с лендингами и подсказками внутри продукта. Делает рассылки компании и отвечает за новости в Телеграм-канале.

Лена Шумная

Редактор Mailganer

23.04.2020

дата публикации

28.12.2024