Как сделать так, чтобы было красиво и ничего не слетало + как настроить свой шрифт в блочном редакторе Mailganer
Есть перечень веб-сейф шрифтов («безопасных для веба»), которые предустановлены практически на всех устройствах и поддерживаются большинством сервисов.
В тексте письма рекомендуется использовать стандартные шрифты, чтобы не было проблем с отображением в любом почтовом сервисе.
Самый популярный кроссплатформенный шрифт с засечками — Times New Roman, а без засечек — Arial. Каждый из них также может иметь разное начертание (жирный, курсив).
Шрифт прописывается при вёрстке рассылки в коде в теге 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 и хотите, чтобы текст в письме отображался нужным вам шрифтом, отличным от стандартных.
Примените на вёрстке медиа-запрос @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.
В мобильной версии медиазапросы также работают — и зависят от приложения, в котором просматривают письмо.
Мобильный браузер (Safari, Chrome и т. д.)
Что важно помнить: письмо можно открыть в другом почтовом клиенте, где контент отобразится корректно.
Так, получатель в браузерной версии Яндекс.Почты увидит стандартный шрифт, но если зайдёт в свою почту на Яндексе через приложение почты для iOS, то медиа-запрос сработает.
Подставляя свои шрифты c помощью медиа-запросов нужно понимать, что они сработают не во всех случаях. Даже если рассылку написать шрифтом Roboto, то он корректно будет отображаться только у подписчиков mail.ru и gmail.com.
А из-за моноширных шрифтов, которые не отобразятся у пользователя, может поехать вёрстка всего письма. Но вполне приемлемо использовать свой шрифт, который не сильно отличается по ширине от стандартных.
В разделе «Настройки» вы можете посмотреть, какой шрифт сейчас используется в вашей рассылке. По умолчанию для всех изначально выбирается Arial.
Изменить шрифт можно в настройках всего блока или содержимого блока.
Вы можете добавить свой шрифт в аккаунт. Пришлите в поддержку ссылку на лицензионный шрифт. Мы убедимся в правомерности его использования и добавим его в выпадающий список блочного редактора для вашего аккаунта.
По умолчанию в Mailganer можно использовать только стандартные шрифты. Это связано с защитой прав правообладателей шрифтов.
Если на рассылку поступит жалоба за нелицензионное использование шрифта, который был загружен на наш сервер, то она будет адресована платформе, через которую было отправлено письмо.
Чтобы снизить юридические риски, мы «разрешаем» использовать для обращения к шрифтам только ссылки, расположенные вне домена mailganer.
! Мы дорожим репутацией, и вас тоже призываем применять нестандартные шрифты только при соблюдении определённых условий.
Если вы используете нестандартные шрифты, то указывайте ссылку на официальный источник шрифта и убедитесь, что его владелец разрешает его свободное использование в рассылках.
Самый популярный открытый источник бесплатных официальных шрифтов — Google Fonts. Именно к нему «обращаются» в большинстве случаев. Делают это с помощью медиа-запроса и постоянной ссылки на этот шрифт.
Нестандартные шрифты не поддерживаются большинством почтовых клиентов и будут автоматически заменены на стандартные.
Google заменяет шрифты на Roboto sans-serif на Android, а в iOS — на Helvetica.
Информация взята из исследования Litmus по шрифтам в рассылках.
Шаг 1. Подготовьте ссылку на постоянное место хранение шрифта и скопируйте её url. Пример ссылки:
tild3462-626237633137__rf-dewi-regular.woff2 Важно: формат файла со шрифтом должен быть woff2.
Если вы используете фирменный шрифт собственной разработки, то укажите ссылку на его постоянное расположение.
Или пришлите нам ссылку на страницу вашего сайта, где есть нужный шрифт.
Важно: шрифт по ссылке должен скачиваться и быть лицензионным — у вас должно быть разрешение на его использование. Мы не примем ссылку на любой сторонний сайт, который не связан с вашей компанией.
Шаг 2. Создайте обращение в поддержку с запросом «Подключите шрифт в конструктор, вот ссылка на шрифт» — и мы подключим его в ваш аккаунт.
Понятно пишет о сложных вещах в разъяснительной Mailganer. Работает с лендингами и подсказками внутри продукта. Делает рассылки компании и отвечает за новости в Телеграм-канале.
Стать автором блога Mailganer ›