Добавление пользовательских шрифтов

Веб-шрифт – один из способов создания индивидуального стиля письма. В 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;
CSS
COPY

5. Загрузите файл stylesheet.css на сервер.

6. В email-редакторе перейдите на вкладку “Мои шрифты” и нажмите кнопку “Добавить шрифт”.

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

8. Подтвердите перезагрузку страницы.

Использование добавленного шрифта

Все шрифты после добавления можно сразу использовать в email-сообщениях.

1. Перейдите к сообщению и выделите текст.

2. Нажмите вкладку “Шрифт” и выберите нужный.

3. К выделенному тексту будет применен шрифт.

Редактирование/удаление шрифта

Чтобы отредактировать или удалить шрифт:

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

2. Нажмите значок карандаша для редактирования или значок крестика для удаления шрифта.

Особенности работы с кастомными шрифтами

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

2. Некоторые шрифты поддерживаются только для языков с латинским алфавитом и цифр, поэтому с кириллическим текстом они не сработают.

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

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

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