Веб-шрифт – один из способов создания индивидуального стиля письма. В редакторе писем 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?

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

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

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

Важно!

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

Нажмите "Select this style" для выбора стиля шрифта и показа блока с его параметрами.

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

Важно!

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

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

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

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

URL c CSS-файлом

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

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

Скопируйте название семейства в блоке Specify in CSS в одном из форматов:

Spartan
'Spartan'
'Spartan', sans-serif
'Spartan', sans-serif;

Важно!

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

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

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

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

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

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

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

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

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

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

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

Как добавить собственные шрифты?

Чтобы загрузить собственный шрифт, нужно добавить в редактор eSputnik ссылку на css файл. Если ссылка у вас уже есть - переходите сразу к пункту 5, если нет - начинайте с первого пункта.

1) Нужно файл шрифта в формате .ttf добавить на сервис fontsquirrel.

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

2) Скачайте архив, где будет файл stylesheet.css

Необходимый файл css

3) В полученный файл нужно добавить src, где на вашем сервере лежит необходимый шрифт в формате 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;

4) Загрузите файл stylesheet.css на свой сервер.

5) При добавлении шрифта в редакторе сообщения eSputnik указать URL на этот файл и на семейство, которое написано в файле, например:

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

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

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

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

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

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

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

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

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

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

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

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

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