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

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

3. Натисніть кнопку “Додати шрифт”.

4. У вікні “Новий шрифт” заповніть параметри:

• Назва шрифту

• URL з CSS-файлом

• Сімейство 

Усі поля обов'язкові для заповнення.

Отримати параметри шрифту можна одним зі способів:

• використовуючи бібліотеку Google Fonts (або іншу бібліотеку шрифтів), 

• створивши власний шрифт.

5. Натисніть “Готово”.

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

Після оновлення сторінки доданий шрифт з'явиться у загальному списку шрифтів.

Ви можете вибрати “Не перезавантажувати”, якщо раніше внесені в повідомлення зміни не були збережені. Після цього збережіть лист і знову увійдіть у нього — шрифт стане доступним.

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

1. Перейдіть за посиланням fonts.google.com.

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

Також можна відсортувати шрифти за їх актуальністю, популярністю, новизною або назвою.

Для прикладу додамо шрифт “Barlow” зі стилем “SemiBold 600”.

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

3. Натисніть “SemiBold 600 +”, а потім іконку кошика для вибору стилю шрифту та показу блоку з його параметрами.

4. У email-редакторі перейдіть на вкладку “Мої шрифти” і натисніть кнопку “Додати шрифт”.

5. У вікні “Новий шрифт” додайте назву шрифту.

6. У вкладці “<link>” скопіюйте вміст атрибута href в такому вигляді:

https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap

7. Вставте скопійоване посилання в поле “URL з CSS-файлом”.

8. У секції CSS rules to specify families скопіюйте назву сімейства шрифту в одному з форматів:

• Barlow

• 'Barlow'

• 'Barlow', sans-serif

• 'Barlow', sans-serif;

9. Вставте скопійовану назву в поле “Сімейство” і натисніть “Готово”.

10. Натисніть “Перезавантажити зараз” і підтвердіть перезавантаження сторінки.

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

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

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

1. Перейдіть за посиланням fontsquirrel.

2. Підготуйте та завантажте файл шрифту в форматі TTF натиснувши Upload fonts.

3. Натисніть “Download your kit” та завантажте згенерований архів у якому буде файл stylesheet.css.

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

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

6. У email-редакторі перейдіть на вкладку “Мої шрифти” і натисніть кнопку “Додати шрифт”.

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

8. Підтвердіть перезавантаження сторінки.

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

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

1. Перейдіть до повідомлення і виділить текст.

2. Натисніть вкладку “Шрифт” і виберіть потрібний.

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

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

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

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

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

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

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

2. Деякі шрифти підтримуються лише для мов з латинським алфавітом та цифр, тому з кириличним текстом вони не спрацюють.

3. Кастомні шрифти краще не використовувати для основного тексту, а розміщувати на картинках, наприклад, додавати до тексту банера, тоді шрифт відобразиться так, як ви задумали. 

4. Текст назви повідомлення, теми й прихованого передзаголовка будуть стандартними, оскільки їхній шрифт визначається поштовим клієнтом.

5. Застосовуючи кастомний шрифт подбайте про те, як він відобразиться в поштових клієнтах, які його не підтримують, оскільки при заміні на стандартний тексту може не вистачити місця, і верстка буде порушена. Передбачте це: проведіть тест, пропишіть альтернативне сімейство, розмір і відступи для коректного відображення листа.