Пользовательские шрифты в email рассылках

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

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

Стандартные шрифты и библиотека Google Fonts

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

Ключевыми из них являются:

• Helvetica: Шрифт, оптимизированный для macOS, обеспечивающий четкость и профессиональный вид.

• Arial: Аналогичный шрифт для Windows, гарантирующий хорошую читаемость на компьютерах под управлением этой операционной системы.

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

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

Добавление кастомных шрифтов:

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

Шаг 1: Подготовка шрифтов

Убедитесь, что у вас есть шрифты в подходящих форматах: .ttf, .otf, .woff или .woff2.

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

Шаг 2: Размещение шрифтов на сервере

Загрузите файлы шрифтов в отдельную директорию на вашем сервере (например, /fonts/).

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

Шаг 3: Подключение CSS-файла

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

<link rel="stylesheet" href="https://ваш-сервер.com/css/fonts.css" em-class="em-font-название-шрифта">

Затем, внутри элемента <style>, не имеющего атрибута em=»styles», необходимо определить CSS-класс и привязать к нему желаемый шрифт посредством свойства font-family.

<style type="text/css">
.em-font-название-шрифта {
font-family: "название шрифта",sans-serif!important;
font-weight: 400!important;
}

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

Шаг 4: Применение шрифтов в письме

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

<div style="font-family: Название шрифта, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 21px; color: #5a5a5a;" class="em-font-название шрифта"> Текст </div>

Готово!

Кастомные шрифты в email-рассылках: плюсы и минусы

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

Плюсы:

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

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

+ Улучшение восприятия информации: Правильно подобранный шрифт может сделать текст более удобочитаемым и приятным для восприятия, что повышает шансы на то, что ваше сообщение будет прочитано и понято.

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

Минусы:

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

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

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

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

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

Важно соблюдать баланс между уникальностью и читабельностью.