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

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

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

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

Почтовые клиенты, где происходит замена пользовательского шрифта на стандартный:

  • Gmail;
  • Outlook.com (версии до 2013 года);
  • Yahoo!;
  • IBM Notes 9 и Lotus Notes 7, 8.5;
  • AOL;
  • Blackberry;
  • Alto;
  • Thunderbird.

Как добавить свой шрифт в eSpuntik?

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

Добавление кастомного шрифта в редакторе писем

2. Для перехода к установке кликните по кнопке “Добавить шрифт” в открывшемся окне.

Начало загрузки шрифта

3. Введите данные о шрифте:

  • его название,
  • URL с CSS-файлом,
  • семейство.

Все поля нужно заполнить обязательно.

Обязательные поля для заполнения

Краткая инструкция, где взять эти данные, откроется, если развернуть блок ”Как подключить шрифт из Google Fonts”.

Краткая инструкция по подключению

После этого нажмите кнопку “Готово”.

Как подключить шрифт из Google Fonts?

  1. Зайдите на fonts.google.com.

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

Выбор шрифта на Google Fonts

Нажмите на “+” в правом верхнем углу на карточке нужного шрифта.

Важно!

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

  1. Разверните появившийся в правой нижней части экрана блок с параметрами шрифта.

Выбор стиля для шрифта

Во вкладке Customize уточните стиль шрифта – поставьте галочку напротив нужного начертания.

Важно!

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

Выбор стиля для загрузки

  1. После того как стиль выбран, переходите к загрузке шрифта в редактор писем.

Во вкладке Embed в Google Fonts нужно скорпировать содержимое атрибута href, например: https://fonts.googleapis.com/css?family=Krona+One&display=swap

Копирование ссылки для загрузки шрифта

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

URL c CSS-файлом

Сразу укажите название шрифта, чтобы потом его легко найти в общем списке:

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

  1. Скопируйте название семейства в блоке Specify in CSS в одном из форматов:
  • Spartan
  • 'Spartan'
  • 'Spartan', sans-serif
  • 'Spartan', sans-serif;

Важно!

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

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

Вставьте в поле “Семейство”:

Указание семейства шрифта в редакторе eSputnik

Для сохранения настроек нажмите “Готово”.

Подтверждение настроек

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

Переход к установке шрифта

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

Подтверждение перезагрузки редактора писем

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

Чтобы отредактировать, удалить шрифт или добавить новый, зайдите в “Мои шрифты”.

Удаление и редактирование настроек

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

Кастомный шрифт в общем списке

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

Особенности работы с пользовательскими шрифтами:

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

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

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

Пример письма с использованием кастомного шрифта

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

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

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