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

Кастомні шрифти допомагають створювати індивідуальний дизайн листа. У редакторі 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. На Панелі керування листом натисніть Додаткові параметри → Мої шрифти.

3. Натисніть + Додати новий шрифт.

4. Виберіть джерело параметрів:

• бібліотека Google Fonts (або інша)
• власний шрифт.

5. Заповніть поля (усі обов'язкові):

• Назва шрифту
• URL із CSS-файлом
• Сімейство

6. Натисніть Додати й підтвердьте перезавантаження сторінки.

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

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

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

3. Клікніть поле шрифту.

4. Натисніть Get font.

5. Натисніть Get embed code.

6. Зліва у списку стилів:

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

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

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

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

7. Відкрийте вкладку eSputnik і у Додаткових параметрах натисніть Мої шрифти → Додати новий шрифт.

8. Вкажіть назву вашого шрифту й вставте скопійоване посилання в поле URL з CSS-файлом.

9. На вкладці зі шрифтами Google Fonts у секції Quantico: CSS class скопіюйте назву сімейства шрифту в такому форматі:
   "Quantico", sans-serif;.

10. На вкладці eSputnik вставте скопійовану назву в поле Сімейство і натисніть Додати.

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

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

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

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

1. Перейдіть за посиланням fontsquirrel.
2. Погодьтеся з правилами використання шрифтів та завантажте файл шрифту в форматі TTF натиснувши UPLOAD FONTS.

3. Натисніть кнопку DOWNLOAD YOUR KIT, та завантажте згенерований zip архів у якому буде файл stylesheet.css.

4. У файлі 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;
}

5. Завантажте файл stylesheet.css на сервер.

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

7. У вікні Новий шрифт додайте назву, URL з CSS-файлом з вашого сервера, сімейство шрифту і натисніть Готово.

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

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

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

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

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

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

1. В email-редакторі перейдіть на вкладку Додаткові параметри → Мої шрифти.

2. Натисніть значок олівця для редагування або значок кошик для видалення шрифту.

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

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

Усунення проблем: Google-шрифт не відображається

Якщо шрифт категорії Веб (включно з Google Fonts), який раніше відображався коректно, раптово показує запасний шрифт:

• Gmail на десктопі очікувано не показує веб-шрифти. Gmail (і більшість вебмейл-клієнтів) не завантажує зовнішні файли шрифтів з міркувань безпеки й швидкодії й завжди переходить на системний шрифт — це нормальна поведінка, а не помилка, і вона не залежить від жодних недавніх змін з вашого боку.
• Перевірте, чи задано запасний шрифт. Без явного запасного варіанту клієнти, що не підтримують шрифт, можуть замінити його на шрифт з іншими метриками, що змінить відступи чи розмір.
• Перевірте посилання на шрифт після оновлення редактора. Якщо спосіб підключення кастомних шрифтів (<link> чи @import) змінився після оновлення платформи, наявний запис у Мої шрифти може перестати розпізнаватися — відкрийте Додаткові параметри → Мої шрифти і перевірте, чи досі завантажується URL з CSS-файлом, а за потреби додайте шрифт повторно.