Додавання кастомних шрифтів у 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.

Щоб знайти потрібний шрифт, можна скористатися пошуком, якщо ви знаєте його назву, або фільтрами за категоріями, мовами, властивостями (кількістю стилів, товщиною, скосом, шириною). Також можна впорядкувати їх за актуальними, найпопулярнішими, новими, і за ім’ям.

Додавання шрифту

Важливо!

Якщо є потреба у двох або більше нестандартних шрифтах, то додавати їх треба послідовно: кожен наступний після завершення встановлення попереднього.

  1. Натисніть "Select this style" для вибору стилю шрифту та показу блоку з його параметрами.

Вибір стилю для шрифту

Важливо!

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

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

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

Копіювання посилання для завантаження шрифту

Вставте скопійоване посилання в поле "URL c CSS-файлом" у вікні eSputnik:

URL з CSS-файлом

Одразу вкажіть назву шрифту, щоб потім легко знайти його в загальному списку:

Назва шрифту

  1. Скопіюйте назву сімейства в блоці 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. Застосовуючи кастомний шрифт, подбайте про те, як він відобразиться в поштових клієнтах, які його не підтримують, оскільки при заміні на стандартний тексту може не вистачити місця і верстка “поїде”. Передбачте це: проведіть тест, пропишіть альтернативне сімейство, розмір і відступи стилем для коректного відображення листа.

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email