Пользовательские шрифты в email-редакторе | Поддержка eSputnik

Email

Омниканальность

Автоматизация

Добавление пользовательских шрифтов

Веб-шрифт – один из способов создания индивидуального стиля письма. В email-редакторе eSputnik вы можете добавить шрифт из библиотеки Google Fonts или другого источника.

Наборы шрифтов в eSputnik

eSputnik предлагает три набора шрифтов для ваших писем:

  • Стандартные шрифты – поддерживаются всеми почтовыми клиентами и устройствами.

  • Нестандартные шрифты – отображаются на большинстве современных устройств.

  • Пользовательские (кастомные) шрифты – преимущественно используются для размещения на баннерах, так как при отправке меняются на стандартные.

Кастомные шрифты позволяют создавать индивидуальный дизайн писем.

Почтовые клиенты, которые поддерживают кастомные шрифты:

  • iOS Mail и Apple Mail;
  • Outlook 2016 и Outlook 2011 for Mac;
  • Android App и Android Mail 2.3, 4.2, 4.4;
  • Lotus Notes 8.

Добавление своего шрифта в eSputnik

  1. Создайте или откройте email-сообщение.

  2. На верхней панели инструментов нажмите значок “три точки” и выберите “Мои шрифты”.

Мои шрифты

  1. Нажмите кнопку “Добавить шрифт”.

  1. В окне “Новый шрифт” заполните параметры:

  • Название шрифта

  • URL з CSS-файлом

  • Семейство 

Все поля обязательны для заполнения.

Получить параметры шрифта можно одним из способов:

Параметры шрифта

  1. Нажмите “Готово”.

  2. Подтвердите перезагрузку страницы.

Перезагрузка страницы

После обновления страницы добавленный шрифт появится в общем списке шрифтов.

Вы можете выбрать “Не перезагружать”, если ранее внесенные в сообщение изменения не сохранялись. После этого сохраните письмо и снова войдите в него – шрифт станет доступным.

Добавление шрифта из Google Fonts

  1. Перейдите по ссылке fonts.google.com.

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

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

Библиотека Google Fonts

Важно

Выберите один из вариантов, поскольку несколько стилей не загрузятся одновременно. Если вам нужно все семейство шрифта, его тоже следует загружать поочередно: например сначала добавляется regular, затем medium, bold и так далее. В email-редакторе eSputnik они добавятся как отдельные шрифты.

К примеру добавим шрифт “Barlow” стиля “SemiBold 600”.

  1. Кликните поле шрифту. 

Выбор шрифта

  1. Нажмите  “SemiBold 600 +”, а потом иконку корзины для выбора стиля шрифта и показа блока с его параметрами.

Блок параметров шрифта

  1. В email-редакторе перейдите на вкладку “Мои шрифты” и нажмите кнопку “Добавить шрифт”.

Добавление шрифта из библиотеки Google Fonts

  1. В окне “Новый шрифт”добавьте название шрифта.

Название шрифта

  1. Во вкладке “<link>” скопируйте содержание атрибута href в таком виде:

https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap

Копирование атрибута href

  1. Вставьте скопированную ссылку в поле “URL з CSS-файлом”.

Поле “URL з CSS-файлом”

  1. В секции  “CSS rules to specify families” скопируйте название семейства шрифта в одном из форматов::

  • Barlow

  • 'Barlow'

  • 'Barlow', sans-serif

  • 'Barlow', sans-serif;

Копирование названия семейства шрифта

  1. Вставьте скопированное название в поле “Семейство” и нажмите “Готово”.

Поле “Семейство”

Важно

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

  1. Нажмите кнопку “Перезагрузить сейчас” и подтвердите перезагрузку страницы.

Перезагрузка страницы

Добавление собственного шрифта

Рассмотрим на примере ресурса Font Squirrel.

Чтобы загрузить собственный шрифт, в поле “URL с CSS-файлом” нужно добавить ссылку на CSS-файл на вашем сервере.

  1. Перейдите оп ссылке fontsquirrel.

  2. Подготовьте и загрузите файл шрифта в формате TTF, нажав “Upload fonts”.

Ресурс Font Squirrel

  1. Нажмите “Download your kit” и загрузите сгенерированный архив в котором будет файл stylesheet.css.

Файл stylesheet.css

  1. В файле stylesheet.css нужно указать src — расположение  (URL) на вашем сервере необходимого шрифта в формате woff2 (шрифт этого формата будет в архиве), например:

@font-face {
font-family: 'Spartan';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  1. Загрузите файл stylesheet.css на сервер.

  2. В email-редакторе перейдите на вкладку “Мои шрифты” и нажмите кнопку “Добавить шрифт”.

Добавление собственного шрифта

  1. В окне “Новый шрифт”добавьте название, URL з CCS-файлом с вашего сервера, семейство шрифта и нажмите “Готово”.

Заполнение параметров

  1. Подтвердите перезагрузку страницы.

Перезагрузка страницы

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

Все шрифты после добавления можно сразу использовать в email-сообщениях.

  1. Перейдите к сообщению и выделите текст.

  2. Нажмите вкладку “Шрифт” и выберите нужный.

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

  1. К выделенному тексту будет применен шрифт.

Редактирование/удаление шрифта

Чтобы отредактировать или удалить шрифт:

  1. В email-редакторе перейдите на вкладку “Мои шрифты”. 

  2. Нажмите значок карандаша для редактирования или значок крестика для удаления шрифта.

Редактирование/удаление шрифта

Особенности работы с кастомными шрифтами

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

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

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

  4. Текст названия сообщения, темы и скрытого предзаголовка будут стандартными, поскольку шрифт определяется почтовым клиентом.

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

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email