15 ноября 2022

Как добавлять и применять пользовательские шрифты с помощью Stripo

Украсьте свои письма пользовательскими шрифтами
Оглавление
  1. Наборы шрифтов, которые предлагает Stripo
  2. Как добавить пользовательский шрифт в настройки проекта с помощью Stripo:
  3. Как добавить пользовательские шрифты не от Google в настройки проекта с помощью Stripo
  4. Как применять пользовательские шрифты в письмах
  5. Выбирая новый шрифт для писем, помните:
  6. В завершение
1.
Наборы шрифтов, которые предлагает 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. Помимо 1 000+ шрифтов 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 вы можете добавлять новые шрифты и удалять те, которые не используете для конкретных проектов.

В завершение

Пользовательские шрифты могут стать отличным инструментом для того, чтобы ваши письма выглядели профессионально и узнаваемо, но крайне важно тестировать свои сообщения перед их рассылкой. Добавьте декоративные шрифты в свой аккаунт и используйте их для придания пикантности шаблонам рассылки.

Украсьте свои письма пользовательскими шрифтами
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
8 комментариев
Dave Myron 3 года назад
Can you update this article to include using non-Google custom fonts?
Анна Кузнецова 3 года назад
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 3 года назад
Hey, thanx a lot!
Анна Кузнецова 3 года назад
Reinhard, Thanks for your supportive feedback. We're glad you liked it :)
Arsen Malashchuk 4 года назад
А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?
Анна Кузнецова 4 года назад
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. Будем рады помочь.
Евгения Землянская 4 года назад
а если есть только файл со шрифтом? Его никак не загрузить?
Анна Кузнецова 3 года назад
Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.