🌐EN🛠️ Developer Guide
User Guide
Start typing to search…

Додавання кастомних шрифтів

Кастомні шрифти допомагають створювати індивідуальний дизайн листа. У редакторі eSputnik ви можете додати шрифт із бібліотеки Google Fonts або з іншого джерела.

Набори шрифтів у 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. На Панелі керування листом натисніть Додаткові параметри → Мої шрифти.
  1. Натисніть + Додати новий шрифт.
  1. Виберіть джерело параметрів:
  1. Заповніть поля (усі обов'язкові ):
  • Назва шрифту
  • URL із CSS-файлом
  • Сімейство
  1. Натисніть Додати й підтвердьте перезавантаження сторінки.

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

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

👍

Порада

Перед додаванням шрифту відкрийте дві вкладки браузера: eSputnik і Google Fonts. Це забезпечить зручне копіювання параметрів.

  1. Перейдіть за посиланням fonts.google.com.
  2. Знайдіть потрібний шрифт за назвою, категорією, мовою або параметрами (кількість стилів, товщина, нахил, ширина).
🚧

Важливо

Виберіть один стиль (кілька одночасно не завантажуються). Для всього сімейства додайте стилі по черзі: Regular, Medium, Bold тощо. У редакторі eSputnik вони з’являться як окремі шрифти.

Для прикладу додамо шрифт Quantico зі стилем Regular 400.

  1. Клікніть поле шрифту.
  1. Натисніть Get font.
  1. Натисніть Get embed code.
  1. Зліва у списку стилів:

  • Залиште активним перемикач лише для Regular 400.

  • У верхньому меню виберіть вкладку Web і спосіб підключення <link>

  • Скопіюйте вміст атрибута href в такому вигляді:

    https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet"

  1. Відкрийте вкладку eSputnik і у Додаткових параметрах натисніть Мої шрифти → Додати новий шрифт.
  1. Вкажіть назву вашого шрифту й вставте скопійоване посилання в поле URL з CSS-файлом.
  1. На вкладці зі шрифтами Google Fonts у секції Quantico: CSS class скопіюйте назву сімейства шрифту в такому форматі: "Quantico", sans-serif;.
  1. На вкладці eSputnik вставте скопійовану назву в поле Сімейство і натисніть Додати.
🚧

Важливо

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

  1. Натисніть Перезавантажити зараз.

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

Розглянемо на прикладі ресурсу Font Squirrel.

Щоб завантажити власний шрифт, в поле URL з CSS-файлом потрібно додати посилання на CSS-файл на вашому сервері.

  1. Перейдіть за посиланням fontsquirrel.
  2. Погодьтеся з правилами використання шрифтів та завантажте файл шрифту в форматі TTF натиснувши UPLOAD FONTS.
  1. Натисніть кнопку DOWNLOAD YOUR KIT, та завантажте згенерований zip архів у якому буде файл stylesheet.css.
  1. У файлі stylesheet.css потрібно вказати src — розташування (URL) на вашому сервері необхідного шрифту у форматі woff2 (шрифт у цьому форматі буде в архіві), наприклад:
@font-face {
  font-family: 'Manrope';
  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 на сервер.
  1. Відкрийте окрему вкладку браузера з email-повідомленням і у Додаткових параметрах натисніть Мої шрифти → Додати новий шрифт.
  1. У вікні Новий шрифт додайте назву, URL з CSS-файлом з вашого сервера, сімейство шрифту і натисніть Готово.

Використання доданого шрифту

Усі шрифти після додавання одразу можна використовувати в email-повідомленнях.

  1. Відкрийте повідомлення і виділіть текст.
  2. У налаштування блока Текст, перейдіть на вкладку Стилі → Шрифт → Користувацькі й виберіть потрібний шрифт.

До виділеного тексту буде застосовано шрифт.

Редагування/видалення шрифту

Щоб відредагувати або видалити шрифт:

  1. В email-редакторі перейдіть на вкладку Додаткові параметри → Мої шрифти.
  1. Натисніть значок олівця для редагування або значок кошик для видалення шрифту.

Особливості роботи з користувацькими шрифтами

  1. Якщо шрифт не відображається, перевірте, чи є він на пристрої, на якому ви переглядаєте лист. Якщо його немає, то текст буде виведений стандартним шрифтом.
  2. Деякі шрифти підтримуються лише для мов з латинським алфавітом та цифр, тому з кириличним текстом вони не спрацюють.
  3. Кастомні шрифти краще не використовувати для основного тексту, а розміщувати на картинках, наприклад, додавати до тексту банера, тоді шрифт відобразиться так, як ви задумали.
  4. Текст назви повідомлення, теми й прихованого передзаголовка будуть стандартними, оскільки їхній шрифт визначається поштовим клієнтом.
  5. Застосовуючи кастомний шрифт подбайте про те, як він відобразиться в поштових клієнтах, які його не підтримують, оскільки при заміні на стандартний текст може не вистачити місця, і верстка буде порушена. Передбачте це: проведіть тест, пропишіть альтернативне сімейство, розмір і відступи для коректного відображення листа.

Updated 29 days ago