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

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