Кастомні шрифти в 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. На верхній панелі інструментів натисніть значок “три крапки” та виберіть “Мої шрифти”.

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

  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