Полное руководство по безопасным для веба шрифтам для email-маркетинга — КРИПТА, ЗАРАБОТОК, АРБИТРАЖ, РАССЫЛКИ, ИНФО О СЛИВАХ/УТЕЧКАХ/ВЗЛОМАХ БАЗ ДАННЫХ

Типографика — один из тех ключевых элементов бренда, который вы никогда не замечаете, когда он сделан правильно, но когда он странный… он действительно странный. (Без обид в адрес Comic Sans, но…)

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

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

В этой статье мы рассмотрим:

— Веб-шрифты против безопасных для веба шрифтов

— Как шрифты работают в электронной почте

— Проблема с пользовательскими веб-шрифтами

— Как выбрать правильный шрифт для вашего бренда

— Как встраивать веб-шрифты в электронную почту

— Где найти веб-шрифты

— Вдохновение для использования веб-шрифтов в ваших письмах

## Веб-шрифты против безопасных для веба шрифтов

Вы, вероятно, читаете этот пост в блоге с использованием безопасного для веба шрифта — шрифтов, которые вы знаете и любите, таких как Arial, Helvetica и Open Sans. Это предустановленные шрифты, которые поставляются со всеми операционными системами, поэтому вы знаете, что они будут отображаться правильно, если вы используете их в электронной почте.

У вас также есть возможность использовать веб-шрифт. Они размещаются внешне, предлагая вам большее разнообразие (например, использование пользовательского шрифта вашего бренда), но потенциально менее надежны для шаблонов электронных писем.

Давайте углубимся в каждый:

### Что такое безопасные для веба шрифты?

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

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

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

— Arial

— Helvetica

— Verdana

— Georgia

— Times New Roman

— Tahoma

Вы не можете предполагать, что популярный шрифт, такой как Garamond, Courier New или Cambria, автоматически будет безопасным для веба. Прежде чем выбрать безопасный для веба шрифт (или запасной шрифт для веб-шрифтов, о котором мы поговорим подробнее), дважды проверьте по такому списку.

### Что такое веб-шрифты?

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

Использование пользовательского шрифта звучит как хорошая идея, особенно если ваш бренд уже использует его для других материалов. Мы поговорим о поддержке почтовых клиентов чуть позже, но спойлер: Gmail и Outlook создают некоторые проблемы. (Разве можно ожидать чего-то другого? 🫠)

Создавайте эффектные письма с помощью экспертных техник

Получите необходимые навыки в разработке электронной почты. Создавайте адаптивные, высокопроизводительные письма, которые отлично выглядят на любом устройстве.

## Как шрифты работают в электронной почте

Когда дизайнеры выбирают шрифты для своего веб-сайта, они, как правило, могут выбирать все, что угодно, включая пользовательский шрифт. Это связано с тем, что на веб-сайте вы можете использовать код CSS или HTML, чтобы указать, где находится шрифт онлайн, будь то Google Font, Adobe Font или что-то еще.

Электронные письма работают не так, потому что… конечно, нет.

Ваш код электронной почты объявляет шрифт с помощью свойства CSS под названием `font-family`. Когда ваши подписчики открывают ваше письмо, браузер считывает свойство `font-family` и загружает шрифт для использования. С безопасными для веба шрифтами это очень просто. Но почтовые клиенты привередливы к тому, какие веб-шрифты они поддерживают, поэтому вы не можете просто выбрать любой шрифт.

«Я на 100% рекомендую использовать запасной шрифт в любое время, когда вы отправляете электронное письмо, потому что веб-шрифты поддерживаются не везде», — говорит Карин Слейтер, менеджер по маркетингу жизненного цикла электронной почты в Litmus. «Теоретически, это должно быть очень просто, но мы говорим об электронной почте».

Это свойство `font-family` может содержать одно название шрифта или несколько названий шрифтов — часто называемых «стеком шрифтов» (font stack). Без указания нескольких названий шрифтов почтовый клиент решает, какой будет ваш резервный шрифт.

## Проблема с пользовательскими веб-шрифтами в электронных письмах

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

### 1. Проблемы с рендерингом

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

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

Это те мелкие детали, которые заставляют email-маркетолога хотеть биться головой о стену.

### 2. Проблемы совместимости

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

*(примерно? Некоторые веб-шрифты отображались, но, возможно, шрифты были загружены на компьютер)

**(Google переопределяет шрифты – по умолчанию на Android Roboto, на iOS выглядит как Helvetica)

***(Шрифты переопределены – Roboto – это стандартный шрифт без засечек)

****(примерно. Понравился Roboto, поэтому есть ограниченная поддержка очень специфических веб-шрифтов – вероятно, конкретных из Google Fonts, возможно, только Roboto, поскольку это стандартный шрифт Google)

### 3. Влияние на пользовательский опыт

Дело в том, что наличие пользовательского веб-шрифта — это та деталь дизайна, которую немногие, если вообще кто-либо, из ваших подписчиков заметит. «Большая часть населения не сможет отличить Proxima Nova от Helvetica», — говорит Слейтер. «Помните, что цель вашего письма — донести сообщение. Мы любим, когда можем создать что-то красивое, но если оно красивое и нечитаемое, это проблема. Оно должно быть функциональным в первую очередь».

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

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

## Лучшие практики использования веб-шрифтов в электронных письмах

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

### 1. Выберите запасной шрифт, соответствующий вашему бренду

Если вы хотите использовать веб-шрифт, стратегически выберите запасной вариант, соответствующий шрифту вашего бренда. Слейтер рекомендует сайт под названием CSS Fonts, чтобы найти менее используемые безопасные для веба шрифты, которые подходят вашему бренду. Сайт показывает, какой процент пользователей ПК и Mac имеют каждый шрифт, так что вы можете сбалансировать стиль и уверенность в том, что большинство подписчиков увидят выбранный вами шрифт.

При выборе шрифтов также убедитесь, что они хорошо контрастируют с цветом фона вашего письма в настройках HTML, чтобы сохранить читаемость.

«Если у вас много людей, открывающих на Windows, в Outlook, и вы используете пользовательский шрифт, это означает, что очень немногие люди на самом деле увидят ваш веб-шрифт», — говорит она. «В таком случае я бы вернулся к команде дизайнеров и показал им цифры, сколько людей действительно могут получить тот бренд-опыт, который они хотят создать. Между CSS Fonts и Litmus Analytics вы можете точно увидеть, сколько людей увидят выбранный ими шрифт. Это обычно помогает начать продуктивный разговор о запасном варианте».

Ищите запасной шрифт, который:

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

— Аналогичная высота строчных букв (x-height), чтобы ваш дизайн письма не развалился при использовании запасного шрифта.

Обратите внимание на тонкие различия в высоте строчных букв между шрифтами Verdana, Arial и веб-шрифтом Proxima Nova.

Каждый почтовый клиент имеет шрифт по умолчанию, если шрифт, указанный в стеке `font-family`, недоступен. Например, Gmail использует Arial, Apple Mail — Helvetica, а Outlook — Times New Roman. Это относится и к устройствам: MacOS использует SF Pro.

### 2. Избегайте писем только с изображениями, которые создают проблемы с доступностью

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

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

«Частое решение для людей, которые не хотят иметь дело с веб-шрифтами, но все еще хотят свои фирменные шрифты, — это помещать весь этот текст в изображение. Это одно дело, если это заголовок или логотип, но для основного текста вы потеряете свое сообщение», — говорит Слейтер. «Гораздо проще включить запасной вариант, чем пытаться добавить огромные блоки альтернативного текста и код вокруг изображений».

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

### 3. Тестируйте свои письма перед каждой отправкой

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

«Мы используем Proxima Nova здесь, в Litmus, с Helvetica в качестве запасного», — говорит Слейтер. «Helvetica немного шире, чем Proxima Nova, поэтому в некоторых случаях слово переносится на другую строку, или иногда блок текста становится выше, чем нам хотелось бы. Это такая мелкая деталь, но если бы мы не тестировали свои собственные письма с помощью Litmus, мы бы не смогли исправить это, чтобы наши письма выглядели хорошо везде».

Отправляйте с полной уверенностью

Предварительный просмотр писем в более чем 100 клиентах, ловите ошибки и обеспечивайте доступность. Сократите время QA вдвое.

## Как выбрать правильные безопасные для веба шрифты для вашего бренда

Независимо от того, выберете ли вы веб-шрифт в качестве основного или останетесь с безопасным для веба шрифтом, может быть трудно понять, что выбрать, учитывая все доступные варианты. «Наша команда дизайнеров в Litmus великолепна, и они говорят мне, что делать», — шутит Слейтер. «Я рада, что мы сели вместе, чтобы выбрать наш запасной шрифт, и мы подумали об этом с самого начала».

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

### 1. Соответствие бренду

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

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

— С засечками против без засечек

— Моноширинный против переменной ширины

— Заголовки против основного текста

— Варианты выбранного вами шрифта в одном семействе шрифтов

Ваш выбор шрифта должен отражать вашу идентичность бренда — будь то более формальный, классический вид или «визг» в стиле Gen-Z. Используйте один и тот же шрифт для всего письма, от заголовка до нижнего колонтитула.

### 2. Читаемость на разных устройствах

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

✖ Вычурные или декоративные шрифты, такие как декоративные, рукописные или шрифты, похожие на рукописные, такие как Lucida Calligraphy или Brush Script MT, могут затруднить для людей с нарушениями зрения или дислексией различение форм букв.

✔ Шрифты без засечек не имеют расширенных элементов или завитков в буквах. Такие шрифты, как Arial, Calibri, Century Gothic или Helvetica, легко читаются.

✔ Шрифты типа «slab» (с прямоугольными засечками), такие как Museo Slab и Rockwell, имеют более толстые линии и также считаются доступными.

Для *некоторых* аудиторий использование простого текстового формата электронной почты обеспечивает универсальную читаемость и полностью исключает потенциальные проблемы с рендерингом шрифтов.

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

### 3. Тон и эмоции

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

Вызовите силу и мощь Римской империи с помощью таких шрифтов, как Palatino или Optima, придайте вашему сообщению вид печатной машинки с старомодными шрифтами, такими как Lucida или Monaco, или придайте ему вид журнала середины 2000-х с Didot.

Усильте свою email-стратегию

Получите экспертные знания и отраслевые ориентиры из последнего отчета «Состояние электронной почты». Улучшите свою игру в email-маркетинге.

## Как встраивать веб-шрифты в электронные письма

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

### 1. Получите URL-адрес вашего файла шрифта

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

Если вы используете сервис веб-шрифтов: сайт или инструмент должен иметь URL-адрес. Если вы используете Google Fonts, найти URL-адрес сложно, но не слишком трудно. Узнайте, как это сделать, в следующем шаге для метода встраивания @font-face.

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

### 2. Импортируйте веб-шрифт одним из трех методов

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

#### Импорт веб-шрифта с помощью <link>

Метод <link> загружает ресурс непосредственно по мере чтения кода HTML-файла (сверху вниз), что может задержать загрузку вашего письма, если ваш файл веб-шрифта очень большой. Использование этого метода для встраивания шрифтов в ваше письмо относительно просто — поместите эту строку кода в <head> вашего письма, ближе к началу:

#### Импорт веб-шрифта с помощью @import

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

@import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);

### Импорт веб-шрифта с помощью @font-face

Онлайн-сервисы веб-шрифтов обычно предлагают пять форматов файлов на выбор:

— .eot

— .woff

— .woff2

— .svg

— .ttf

Форматы .woff и .woff2 имеют лучшую поддержку в электронной почте, поэтому мы рекомендуем использовать один или оба этих формата, когда это возможно. С другой стороны, метод @font-face — единственный метод, который позволяет вам выбирать формат файла, который вы хотите импортировать, что делает его самым надежным способом реализации веб-шрифтов.

Вот типичное объявление @font-face для импорта веб-шрифта в электронное письмо с использованием Google Fonts в качестве выбранного нами сервиса веб-шрифтов:

@font-face {

font-family: ‘Roboto’;

font-style: normal;

font-weight: 400;

src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format(‘woff2’);

}

Если вы используете Google Fonts, сначала найдите код @font-face, найдя нужный шрифт на Google Font. Затем выберите нужный стиль. Справа появится всплывающее меню.

Во всплывающем окне будет выбор для <link> или @import. Оба они будут иметь URL-адрес (выделен на скриншоте выше). Вы можете скопировать этот URL-адрес и вставить его в адресную строку браузера, чтобы найти CSS-таблицу стилей, которую использует Google.

Скопируйте и вставьте версию «Latin» @font-face между тегами <style>.

В Litmus метод @font-face — это наш основной способ встраивания веб-шрифтов в наши письма.

(Вся заслуга в этом методе импорта веб-шрифтов принадлежит защитнику доступности электронной почты Полу Эйри, как подробно описано в прошлом выпуске Type: E newsletter.)

Вот что следует иметь в виду: вы можете создавать красивый код, который работает в Litmus целый день, но если ваш ESP изменяет ваш код, как мы знаем, что большинство из них делают, то ничего из того, что вы делаете, не будет иметь значения. 😭

Убедитесь, что ваш ESP не изменяет ваш код таким образом, чтобы ваши шрифты перестали работать.

### 3. Используйте свои шрифты в электронной почте

Вы должны были выбрать запасной вариант, но если вы еще этого не сделали, то сейчас самое время. Легко добавить ваш запасной вариант в ваш стек шрифтов. Просто используйте имя `font-family`, определенное в методе импорта, за которым следуют ваши запасные шрифты в CSS inline или в <head>:

`font-family: ‘Roboto’, Verdana, sans-serif;`

Думайте об этом как о приоритетном списке предпочтительных шрифтов. Если почтовый клиент не может выполнить ваш выбор №1, он перейдет к следующему в вашем списке.

Например, используя приведенный выше стек `font-family`, отображаемым шрифтом будет Verdana, поскольку Gmail проигнорирует (неподдерживаемый) первый шрифт в списке. Предположим, используемое устройство не поддерживает Verdana (что очень маловероятно, поскольку Verdana — это безопасный для веба шрифт). В этом случае устройство будет использовать системный шрифт без засечек по умолчанию, поскольку это третий шрифт в списке.

Это одинаково важно при написании кода таблицы в HTML, который часто требует запасных шрифтов для обеспечения единообразия в различных почтовых клиентах.

### 4. Избегайте фальшивого жирного или фальшивого курсива

Если у вас есть сопровождающие жирные и курсивные версии ваших файлов веб-шрифтов, то давайте их использовать!

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

В основном, **НЕ** делайте этого:

@font-face {

font-family: ‘Roboto’;

font-style: normal;

font-weight: 400;

src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format(‘woff2’);

}

style=»font-family: ‘Roboto’, Verdana, sans-serif; font-weight: bold; font-style: italic;»

Как и в веб-дизайне, вы можете использовать настоящие шрифты, включив эти стили в ваш стек @font-face, вот так:

@font-face {

font-family: ‘Roboto’;

font-style: normal;

font-weight: 400;

src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format(‘woff2’);

}

@font-face {

font-family: ‘Roboto’;

font-style: italic;

font-weight: 400;

src: local(‘Roboto-Italic’), src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format(‘woff2’);

}

@font-face {

font-family: ‘Roboto’;

font-style: normal;

font-weight: 700;

src: local(‘Roboto-Bold’), src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format(‘woff2’);

}

@font-face {

font-family: ‘Roboto’;

font-style: italic;

font-weight: 700;

src: local(‘Roboto-BoldItalic’), src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format(‘woff2’);

}

Как видите, разные стили извлекают разные шрифты независимо от `font-family`. Таким образом, если вы стилизуете свой шрифт в HTML таким образом:

style=»font-family: ‘Roboto’, Verdana, sans-serif; font-weight: bold; font-style: italic;»

…тогда он извлечет настоящий **«Roboto-BoldItalic»** шрифт! Аналогично, просто добавление `font-weight: bold;` извлечет **«Roboto-Bold»**, а просто добавление `font-style: italic;` извлечет **«Roboto-Italic»**.

**Не делайте этого тоже!**

Итак, вы можете спросить — зачем делать это таким образом, вместо того, чтобы объявлять отдельный `font-family` для каждого стиля, который также извлекает настоящие шрифты? Вот как это выглядит:

@font-face {

font-family: ‘Roboto Bold Italic’;

src: local(‘Roboto Bold Italic’), local(‘Roboto-BoldItalic’), url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format(‘woff2’);

}

style=»font-family: ‘Roboto Bold Italic’, Verdana, sans-serif;»

Это создает проблему. Использование имен `font-family` для хранения стилей создает чрезмерно сложные и избыточные CSS и лишает ваш текст стилизации, если ваши запасные варианты активируются. Так, например, если вы просматриваете приведенный выше код в Gmail (который не поддерживает пользовательские веб-шрифты), вы увидите только нежирный, некурсивный Verdana вместо Roboto Bold Italic.

Сохраняя `font-family` и `font-weights` или `font-styles` раздельно, ваши запасные шрифты сохранят правильную стилизацию.

### 5. Используйте исправление для Outlook

Outlook имеет прекрасную особенность, которую стоит учитывать, особенно если многие ваши подписчики используют его.

Если вы используете метод <link> или @import, Outlook отобразит Times New Roman независимо от того, какие запасные варианты вы указали для вашего шрифта. 🤦

Самый простой способ исправить это — использовать метод @font-face. Но если вам нужно использовать метод <link> или @import, используйте условные блоки Microsoft Office (MSO), чтобы закомментировать эту часть ваших стилей. Этот метод помешает Outlook увидеть их, и он будет использовать ваши запасные шрифты по назначению.

Если вы обнаружите, что Outlook преобразует ваш шрифт в Times New Roman, вы можете добавить `mso-font-alt: ‘Arial’;` в блок @font-face, чтобы предоставить альтернативный запасной вариант для Outlook:

@font-face {

font-family: ‘Roboto’;

font-style: normal;

font-weight: 400;

mso-font-alt: ‘Arial’;

src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format(‘woff2’);

}

Другое решение — кодирование `font-family` с помощью стека безопасных для веба шрифтов inline и включение блока <style>, чтобы переопределить шрифты с помощью веб-шрифта. Затем остается только скрыть этот блок стилей от Outlook:

style=»font-family: Verdana, Helvetica, sans-serif;»

## Где найти веб-шрифты в электронных письмах

Давайте рассмотрим наши любимые источники веб-шрифтов.

### 1. Google Fonts

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

### 2. Adobe Fonts

Adobe Fonts не является полностью бесплатным, но включен в подписки Creative Cloud. Сервис поддерживает как методы <link>, так и @import для использования в качестве веб-шрифтов (об этом подробнее далее).

### 3. Сервисы веб-шрифтов

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

— Type Network (Веб-лицензия)

— Process Type Foundry (Веб-лицензия)

— Optimo (Лицензия на цифровые объявления)

— Fontspring (Индивидуальная лицензия на электронную почту)

— Typotheque (Веб-лицензия)

— Production Type (Лицензия на онлайн-рекламу)

— MyFonts (Веб-лицензия)

— Commercial Type (Веб-лицензия)

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

## Вдохновение для использования веб-шрифтов

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

### 1. Webflow: чистый и понятный UX

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

### 2. PayPal: новый современный

PayPal использует семейство шрифтов Supreme, потомка Futura, для своих писем и приложения, что придает им очень чистый вид. Это очень актуальный шрифт для цифровых медиа, который становится все более популярным, потому что он чрезвычайно читаемый и современный.

### 3. Jewel Osco: гармонично

Jewel Osco использует Nunito Sans, который имеет сбалансированный, просторный вид из Adobe Fonts. Их запасной вариант отлично сочетается с Poppins, другим более геометрическим шрифтом, который так хорошо подходит к Nunito, что трудно отличить.

### 4. Тед Гоас: полный стек шрифтов

Легко выбрать что-то вроде Arial для новостной рассылки по электронной почте, но коллега-энтузиаст email Тед Гоас использует Space Grotesk, очень крутой шрифт без засечек.

Однако, что выделяется в этом письме, так это скрытый в коде: вместо одного запасного варианта он добавил целый ряд, включая Lucida Bright, Book Antiqua и Georgia, чтобы независимо от того, какой почтовый клиент используют его подписчики, он контролировал бренд-опыт.

### 5. Lego и CrunchLabs: игривые строительные блоки

Приятно, когда шрифт так хорошо отражает бренд, и это верно для брендов игрушек Lego и CrunchLabs. Lego известен своим угловатым, игривым шрифтом без засечек под названием Noto Sans. Они используют Arial в качестве запасного варианта, что выполняет свою задачу.

А CrunchLabs также предлагает округлый, игривый шрифт, не делая его слишком детским. Их письма легко читаются, не будучи формальными или чопорными.

## Оставайтесь в рамках бренда и без ошибок с Litmus

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

Всегда! Тестируйте!

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

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

*Оригинальная публикация 11 апреля 2019 года, автор Джайна Мистри. Последнее обновление 14 января 2025 года, авторы Кайла Войгт и Джайна Мистри.