timer ~ 8 хв читати
103053 перегляди
оцінити
15 листопада 2022

Як додавати та застосовувати користувацькі шрифти за допомогою Stripo

Stripo / Blog / Як додавати та застосовувати користувацькі шрифти за допомогою Stripo

26-го листопада 2018 року ми випустили нову опцію — тепер за допомогою Stripo ви можете додавати шрифти в проєкти всього кількома кліками без навичок HTML. Чому це важливо?

Не секрет, що гарний текст доповнює дизайн листа та переконує клієнтів здійснити покупку.

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

Приклад банера з шрифтами користувача Stripo

У цьому випадку вам доведеться звертатися до користувацьких шрифтів.

Перегляньте коротке відео, в якому пояснюється, як додати користувацькі шрифти до Stripo. Зверніть увагу, що ця функція доступна лише для платних тарифних планів. 

Як додати власні шрифти за допомогою Stripo

Більшість ESP та конструкторів листів пропонують лише веб-безпечні шрифти, у той час як Stripo пропонує цілих чотири набори:

Набори шрифтів, які пропонує Stripo

Stripo пропонує чотири набори шрифтів для ваших листів:

1. Стандартні/веб-безпечні шрифти

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS та Verdana — найпопулярніші шрифти, оскільки вони широко використовуються на сайтах та коректно відображаються більшістю поштових клієнтів.

Користувальницькі шрифти Stripo Arial

2. Нестандартні шрифти

Про ці шрифти деякі фахівці досі сперечаються, а саме: чи є вони веб-безпечними чи ні. Однак вони широко використовуються в інтернеті. Наприклад, Playfair Display використовується майже на 1.1 мільярді сайтів, популярних переважно в США та Західній Європі.

Stripo _ Кастомні шрифти _ Display Fair

Примітка: чи знаєте ви, що можна зменшити кількість стандартних та нестандартних шрифтів для своїх проєктів, якщо деякі з них здаються вам зайвими?

Як прибрати непотрібні шрифти зі списку:

  • зайдіть до налаштувань проєкту у своєму акаунті;

  • знайдіть вкладку Управління шрифтами;

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

3. Шрифти для банерів

Вони є декоративними і можуть застосовуватися тільки до банерів, оскільки будь-який текст, який ви розташуєте на банерах, вважатиметься за елемент зображення. Отже, він правильно відображатиметься на всіх пристроях, незалежно від того, який шрифт ви застосуєте.

Stripo пропонує понад 40 з них.

Приклад банера з шрифтами користувача Stripo

Список цих шрифтів ви бачите лише під час роботи з написами на банерах.

4. Користувацькі шрифти

У Stripo ви можете додати будь-який шрифт, що подобається.

Кількість шрифтів, що додаються, не обмежена.

Після встановлення нових шрифтів застосуйте їх до меню та текстів — до всіх фрагментів у листах, окрім банерів.

Як додати користувацький шрифт в налаштування проєкту за допомогою Stripo:

Ще раз хочу наголосити, що це дуже простий процес, тому що вам не потрібно вносити жодних змін до HTML-коду листа. Ще одна приємна новина полягає в тому, що вам не потрібно встановлювати одні й ті самі нові шрифти для кожного шаблону листа, над яким ви працюєте — ви встановлюєте їх для цілих проєктів. Вони будуть доступні в списку у всіх ваших кампаніях у рамках цих проєктів.

Крок 1. Google

По-перше, вам потрібно знайти шрифт, який найбільше сподобався. Мені до смаку шрифт Great Vibes, який я знайшла на Google Fonts. Крім 1000+ шрифтів Google також пропонує популярні парні поєднання з ними.

  • отже, вам потрібно вибрати шрифт, проскроллити вниз до секції «Стилі» та натиснути на знак «плюс»;

Користувальницькі шрифти Google _ Stripo

  • далі натисніть на значок «Переглянути вибрані сімейства» у верхньому правому куті веб-сторінки;

Перегляд вибраних сімейств у Google Fonts

  • у спливаючому вікні скопіюйте посилання — воно виділене на скриншоті нижче.

Користувальницькі шрифти Stripo _ Вбудовування вашого посилання

Крок 2. Stripo

Щоб встановити його у своєму акаунті Stripo, вам необхідно:

  • клікнути на ім'я акаунту в правому верхньому кутку екрана;

  • вибрати «Налаштування організації»;

Додавання користувацьких шрифту до вашого облікового запису Stripo

  • ліворуч ви побачите «Проєкти» — натисніть на цю вкладку;

Користувацькі шрифти Stripo _ Ваші проекти

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

  • клікніть на кнопку «Налаштування»;

Користувацькі шрифти _ Налаштування проекту в обліковому записі Stripo

  • проскролльте вниз, щоб побачити секцію «Управління шрифтами»;

  • клікніть на кнопку «Додати власний шрифт» (у мене вже є три такі шрифти);

Користувацькі шрифти Stripo _ Натисніть, щоб додати свій шрифт

  • у спливаючій формі вкажіть назву шрифту, додайте URL для вбудовування та введіть сімейство шрифтів, задане Google;

Підключення власного шрифту

Примітка: для вашої зручності ми наполегливо рекомендуємо вказувати реальні назви шрифтів, що завантажуються.

  • після того, як ви коректно заповните всі поля, натисніть «Підключити».

Ви знайдете нові шрифти у випадаючому списку при редагуванні листа.

Як додати користувацькі шрифти не від Google в налаштування проєкту за допомогою Stripo

Якщо ви не змогли знайти бажаний варіант у Google Fonts, не хвилюйтесь! Ви можете додати будь-який користувацький шрифт до свого акаунту Stripo, завантаживши посилання на нього.

Ви також можете використовувати особисті створені шрифти:

  • завантажте файли шрифтів у відкрите хмарне сховище або на платформу обміну файлами;

  • переконайтеся, що файли доступні для перегляду, щоб користувачі могли побачити їх;

  • додайте заголовок Access-Control-Allow-Origin до файлів шрифтів, щоб уникнути блокування браузером;

  • додайте посилання до свого акаунту Stripo описаним вище способом. Переконайтеся, що ваші посилання починаються з "https" і не виділені лапками.

Ось приклад того, як додати користувацький шрифт до акаунту Stripo за допомогою Adobe Fonts:

  • перейдіть до сторінки Adobe Fonts;

  • виберіть шрифт, що сподобався, і натисніть кнопку </>;

Виберіть власний шрифт у Adobe Fonts

  • введіть назву свого проєкту;

  • виберіть зображення та стиль шрифту;

  • натисніть кнопку «Створити»;

Adobe Fonts _ Додавання шрифту до веб-проекту

  • скопіюйте посилання;

Adobe Fonts _ Скопіюйте посилання

  • виконайте описані вище кроки, щоб додати цей шрифт до свого акаунту Stripo.

Примітка: якщо ви хочете використовувати шрифти з Adobe Fonts, то без підписки Creative Cloud не зможете цього зробити.

Активація шрифтів у Adobe Fonts

Як застосовувати користувацькі шрифти у листах

Ви можете використовувати будь-який шрифт, що сподобався, в текстових блоках і меню, щоб зробити свої листи живими й унікальними. Але не забудьте перевірити їх на сумісність із провідними поштовими клієнтами.

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

Stripo не тільки наполегливо рекомендує вам тестувати листи/шрифти за допомогою Email on Acid або Litmus, але й надіслати цей лист ні всі ваші адреси електронної пошти, щоб побачити, як виглядає вибраний шрифт в реальності.

Для свого тесту я вибрала шрифт Alumni Sans. Наш інструмент тестування листів показав, що більшість пристроїв та поштових клієнтів замінюють цей шрифт на шрифт за замовчуванням. На скріншотах нижче видно, що Apple Mail правильно відображає шрифт Alumni Sans, а Outlook 2019 замінив його стандартним.

Тестування спеціальних шрифтів у кількох клієнтах електронної пошти

Поштові клієнти, які підтримують користувацькі шрифти у листах

Їх всього декілька:

  • Apple Mail (стандартний шрифт — Helvetica);

  • Apple iPhone (стандартний шрифт — Helvetica);

  • Thunderbird (стандартний шрифт — Impact);

  • додаток Outlook для Android, iOS та Mac (стандартний шрифт — Calibri);

  • рідний поштовий додаток Android (стандартний шрифт — Roboto).

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

Вибираючи новий шрифт для листів, пам'ятайте:

  1. Тільки деякі поштові клієнти підтримують користувацькі шрифти.

  2. Шрифти Sans-serif забезпечують більш легке сприйняття та більше підходять для формальних текстів і ділових розсилок.

  3. Людям з порушеннями зору та дислексією потрібно більше часу, щоб прочитати текст, написаний шрифтом serif, проте він найкраще підходить для промо-листів.

  4. Для HTML-листів оптимальним розміром шрифту є 14 px, а для мобільних пристроїв — 16 px.

  5. Щоб зробити ваші листи доступними, уникайте білого фону та відцентрованих текстів.

  6. У своєму акаунті Stripo ви можете додавати нові шрифти та видаляти ті, які не використовуєте для конкретних проєктів.

На завершення

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

Прикрасьте свої листи користувацькими шрифтами

Dave Myron 2 роки тому

Can you update this article to include using non-Google custom fonts?

Hanna Kuznietsova прокоментував Dave Myron 2 роки тому

Dave, Hello... Thank you for your question. We will update the post soon ? As for non-Google custom fonts: You can add custom fonts to your Stripo account only by uploading a link to the selected font. For example, the Adobe Fonts site https://fonts.adobe.com/collections offers links to the fonts and their description ("font-family") for entering information in the proper fields. The embedding link provided by Adobe Fonts needs to be converted to the format specified in the article or input field: it must start with https; no quotes before and after the link. Please do everything as you would do to Google Fonts, as shown in the video. https://www.youtube.com/watch?v=U2X3CLN01zA You can also use your fully custom fonts. Just upload them on your website, and then add the link to your Stripo account. Proven - Adobe fonts work well :) If you need more detailed instructions with screenshots, please write to us at contact@stripo.email.

Reinhard Jung 2 роки тому

Hey, thanx a lot!

Hanna Kuznietsova прокоментував Reinhard Jung 2 роки тому

Reinhard, Thanks for your supportive feedback. We're glad you liked it :)

Arsen Malashchuk 3 роки тому

А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?

Hanna Kuznietsova прокоментував Arsen Malashchuk 3 роки тому

Arsen, Спасибо за обращение. Добавлять кастомные шрифты в Ваш аккаунт в Stripо можно только лишь подгружая ссылку на выбранный шрифт. Например, сайт Adobe Fonts https://fonts.adobe.com/collections предлагает именно ссылки к шрифтам и их описание ( "font-family", обычный это шрифт или курсив) для введения информации в соответствующие поля. Ссылку для встраивания, которую предоставит Adobe Fonts, вам нужно привести к формату, который обозначен в статье или поле для введения: начинаться она должна с https; никаких кавычек до и после ссылки. Делайте, пожалуйста, все по аналогии со шрифтами Google Fonts, как показано в видео. https://www.youtube.com/watch?v=U2X3CLN01zA Проверено — шрифты Adobe подгружаются и работают :) Если же Вам понадобится более подробная инструкция со скриншотами, — пожалуйста, пишите нам на contact@stripo.email. Будем рады помочь.

Евгения Землянская прокоментував Hanna Kuznietsova 2 роки тому

а если есть только файл со шрифтом? Его никак не загрузить?

Hanna Kuznietsova прокоментував Евгения Землянская 2 роки тому

Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.

Вас також може зацікавити

Попередні статті Наступні статті
banner9
06 червня 2022 · 15 хв читати
ТОП-10 email-редакторів 2022 року

Усі конструктори email-шаблонів вам здаються однаковими? І ви вагаєтесь із вибором найкращого інструменту для своїх кампаній, чи не так? Не дивно, адже цих інструментів дуже багато. Тож давайте зробимо огляд найпопулярніших конструкторів, аби виділити їхні відмінності й допомогти вам у пошуку ідеального HTML-редактора шаблонів для ваших поточних потреб. Я спробую створити однакові шаблони з ідентичними медіа-файлами у кожному редакторі, щоб побачити, чим відрізняються ці інструменти. Найкращі конструктори email-шаблонів Для нашого огляду ми обрали такі редактори: Stripo, HubSpot, Campaign Monitor, AWeber,...

Дизайн Маркетинг Шаблон
best-fonts-for-email-cover-image-stripo
24 травня 2022 · 18 хв читати
Найкращі шрифти для розсилок: поради та хитрощі

Одна з найсерйозніших проблем під час створення електронних листів — правильно вибрати шрифт. Вага, висота, ширина, колір, форма, інтервал... Чи справді тут все має значення? Так, важливим є все, але найголовніша умова — вибрати читабельний шрифт. У цій статті ми розповімо, як вибрати найкращий професійний шрифт для розсилки. Створюйте елегантні листи за допомогою Stripo в найкоротші терміни, використовуючи наші готові шаблони Ознайомитися   Шрифти HTML-листів: основні правила, яких треба дотримуватися Вибираючи оптимальний шрифт, слід враховувати три базових правила: 1. Не...

Дизайн Маркетинг
Greatest Examples of GIF animations in Emails_Cover Image
27 жовтня 2021 · 10 хв читати
16 найкращих прикладів GIF-анімацій у розсилках

GIF-анімації в електронних листах стануть у великій нагоді, якщо ви бажаєте продемонструвати свою продукцію, привернути увагу користувачів до певних елементів листа або просто трохи прикрасити свій текст. У цій статті ми підготували для вас добірку найкращих прикладів таких анімацій. Приклади GIF-анімацій в email-розсилках Отже, ось наша компіляція найбільш вдалих прикладів використання GIF-файлів у листах. У кожному з них гіфка виконує свою місію. 1. Adidas (Джерело: лист від Adidas) Adidas застосували в листі анімацію, щоб показати доступні кольорові версії товару. Виглядає...

Дизайн Маркетинг
08 квітня 2021 · 17 хв читати
Дизайн підпису в листах: 14 найкращих прикладів

Гарні підписи листів допомагають нам розвивати бізнес та справляти позитивне враження на клієнтів. Оскільки підпис листа — це останнє, що люди бачать у повідомленнях електронної пошти, ми повинні робити його креативним і незабутнім. Давайте розглянемо найкращі приклади підписів у листах та їхнє правильне використання в особистих листуваннях та розсилках. Зверніть увагу, що для всіх видів бізнесу потрібні різні професійні підписи до листів з детальною контактною інформацією. Використовуйте цей шаблон підпису листа, щоб швидше створити власний Використати Цей підпис листа добре...

Дизайн Маркетинг Шаблон
Будьте завжди в курсі останніх новин у сфері email-маркетингу