Web Safe Fonts против Web Fonts - лучший шрифт для почтового маркетинга

1. Веб-шрифты против веб-безопасных шрифтов - в чем разница?
2. Где я могу найти веб-шрифты?
3. Добавление веб-шрифтов в вашу электронную почту
4. 1. Используйте @import
5. 2. Используйте тег <link>
6. 3. Метод @ font-face
7. Пример веб-шрифтов в электронной почте
8. Совместимость веб-шрифтов по электронной почте
9. Выбор правильного резервного шрифта
10. Проблема Outlook с веб-шрифтами
11. Не забудьте проверить
12. Стоят ли веб-шрифты?
13. Альтернатива веб-шрифтам в электронной почте
14. Заключительные мысли

Сообщение от Скотт Коэн во время истории

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

Шрифты - это важный способ отразить индивидуальность вашего бренда. Тем не менее, в цифровом пространстве специализированные шрифты требуют, чтобы получатели вашего сообщения «владели» одним и тем же шрифтом на своем устройстве. Но с появлением «веб-шрифтов» и «веб-безопасных» шрифтов это уже не так.

Веб-шрифты против веб-безопасных шрифтов - в чем разница?

Например, вы используете веб-безопасные шрифты в своих электронных письмах (особенно в личных письмах). Такие шрифты, как Arial, Verdana, Georgia, Times New Roman и Courier, считаются «безопасными для Интернета» или «безопасными для электронной почты», поскольку по умолчанию они устанавливаются практически на каждом компьютере, устройстве и операционной системе.

Веб-безопасные шрифты не следует путать с веб-шрифтами. Веб-шрифты установлены не на каждой операционной системе и устройстве. Тем не менее, часто вы обнаружите, что веб-шрифты встроены в веб-браузеры и загружаются в браузер пользователя посредством рендеринга и применяются к тексту.

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

Где я могу найти веб-шрифты?

Google Fonts - один из самых простых источников для поиска веб-шрифтов. Вы можете бесплатно загрузить шрифты и использовать их по своему усмотрению - в Adobe Photoshop, Sketch и т. Д.

Вы также можете выбрать веб-шрифты из платных сервисов, таких как:

MyFonts
коммерческий
FontSpring
Typotheque
Тип процесса Литейное производство
Тип производства
YouWorkForThem
Деревня
FontShop

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

Добавление веб-шрифтов в вашу электронную почту

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

Есть три основных способа сделать это:

1. Используйте @import

@import может быть самым простым способом импорта веб-шрифтов в вашу электронную почту. Просто добавьте нижеприведенный код в тег head вашей электронной почты, желательно в верхней части <style>.

@import url ('https://fonts.googleapis.com/css?family= <fontname>'); При использовании Google шрифтов

Или же

@import url («пользовательский URL, где размещен шрифт»);

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

2. Используйте тег <link>

Подобно методу @import, значение href определяется либо службой веб-шрифтов, либо адресом размещенного сервера шрифта.

<link href = ”https://fonts.googleapis.com/css?family=fontname” rel = ”stylesheet” type = ”text / css”>

• тег <link> против @import

При выборе между методом <link> и методом @import необходимо учитывать две вещи: поддержка и время загрузки.

Метод <link> поддерживается AOL Mail, собственным почтовым приложением Android (не приложением Gmail), Apple Mail, iOS Mail, Outlook 2000 и Outlook.com App.

Метод @import задерживает загрузку импортируемого веб-шрифта до полной загрузки HTML-кода, в который он встроен. Метод <link> загружает ресурс встроенным. Если ваш файл веб-шрифтов особенно большой, лучше использовать метод @import, учитывая, что электронная почта загружается, даже если веб-шрифт «в пути». Если веб-шрифт меньше, то метод <link> может быть достаточным.

3. Метод @ font-face

Пять форматов файлов в основном доступны в онлайн-сервисах шрифтов.

1. .eot
2. .woff
3. .woff2
4. .svg
5. .ttf

Электронные письма лучше всего работают в формате .woff. Использование метода @ font-face позволяет вам выбрать формат файла, который вы хотите импортировать.

@ font-face {font-family: 'Gill Sans MT'; стиль шрифта: нормальный; начертание шрифта: 400; src: local ('Gill Sans MT-Regular'), формат url (ссылка) ('woff'); }

Пример веб-шрифтов в электронной почте

Fortnum & Mason использует по крайней мере один веб-шрифт в своем тексте электронной почты:

Вежливость: действительно хорошие письма

Совместимость веб-шрифтов по электронной почте

Веб-шрифты совместимы в следующих почтовых клиентах:

1. AOL Mail
2. Собственное почтовое приложение Android (не приложение Gmail)
3. Apple Mail
4. iOS Mail
5. Outlook 2000
6. Приложение Outlook.com

Хотя Outlook 2000 и AOL Mail могут не занимать большую часть вашего списка, остальные 4 почтовых клиента входят в первую десятку с точки зрения использования согласно Litmus.

Как видите, многие почтовые клиенты (и, в частности, некоторые из более крупных, например Gmail) не поддерживают веб-шрифты. Вот почему важно предоставить резервный шрифт или шрифт «по умолчанию» для ваших подписчиков, которые не смогут насладиться уникальным опытом.

Выбор правильного резервного шрифта

Ваш резервный шрифт должен максимально соответствовать вашему дизайну электронной почты и веб-шрифту, который вы выбрали. Например: если ваш веб-шрифт шрифт с засечками, ваш резервный шрифт также должен быть шрифт с засечками.

Чтобы быть в безопасности, вы также должны выбрать запасной шрифт, который имеет примерно такую ​​же вертикальную высоту (или высоту х) выбранного вами веб-шрифта. Таким образом, ваш общий дизайн не сильно страдает от отсутствия поддержки веб-шрифтов.

Чтобы получить более четкое представление о веб-шрифтах и ​​их запасных шрифтах, ознакомьтесь с Стек шрифтов CSS ,

Проблема Outlook с веб-шрифтами

Проще говоря, Outlook - это единственный почтовый клиент, который делает все ... «по-другому».

Outlook не будет использовать выбранный вами шрифт из коробки. Вместо этого он вернется к Times New Roman.

Существует решение этой проблемы.

Вам нужно только вставить код, указанный ниже.

<! - [if mso]> <style type = ”text / css”> .fallback-text {font-family: Arial, sans-serif; } </ style> <! [endif] ->

Используйте класс fallback-text, если у вас есть семейство веб-шрифтов, как показано ниже:

<td class = ”fallback-text” style = ”font-family: 'Open Sans', Arial, sans-serif;”> Открыть шрифт sans для всех! </ td>

Не забудьте проверить

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

Стоят ли веб-шрифты?

Посмотрите на свой список рассылки и посмотрите, сколько подписчиков просматривают ваши письма в почтовом клиенте, поддерживающем веб-шрифты. Например, если ваш список подписчиков сильно загружен при использовании iPhone, то использование веб-шрифтов может стоить усилий. Если основная часть вашего списка находится в Gmail (которая не поддерживает веб-шрифты), то, возможно, это не стоит усилий.

Альтернатива веб-шрифтам в электронной почте

Есть ли шрифт, который вы действительно хотите использовать? Поместите его в изображение и предоставьте подходящие alt-теги и встроенный стиль для его форматирования. Помните: убедитесь, что вы сохраняете соотношение текста к изображению 80/20 при этом. Письма только с изображениями могут создавать свои собственные проблемы.

Заключительные мысли

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

Проверьте наше портфолио электронной почты ВОТ ,

Обмен - это забота!