Фичи
Интеграции
Цены
Поддержка
Материалы
Полезное

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

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

Оглавление

1.
Какие шрифты используют в имейл-рассылках ›
2.
Медиа-запросы в HTML-коде ›
3.
Настройка шрифта в блочном редакторе Mailganer ›
4.
Использование нестандартного шрифта в рассылках ›

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

Есть перечень веб-сейф шрифтов («безопасных для веба»), которые предустановлены практически на всех устройствах и поддерживаются большинством сервисов.
В тексте письма рекомендуется использовать стандартные шрифты, чтобы не было проблем с отображением в любом почтовом сервисе.
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. Именно к нему «обращаются» в большинстве случаев. Делают это с помощью медиа-запроса и постоянной ссылки на этот шрифт.

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

Шаг 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
дата последнего обновления