Добавление пользовательских шрифтов в 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2) Скачайте архив, где будет файл stylesheet.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. Применяя пользовательский шрифт, подумайте о том, как он отобразится в почтовых клиентах, которые его не поддерживают, так как при замене на стандартный тексту может не хватить места и верстка поедет. Предусмотрите это: сделайте тест, пропишите альтернативное семейство, размер и отступы стилем для корректного отображения письма.