Как отправить шрифт файлом

Обновлено: 07.07.2024

Вставляем его в head страницы:

И используем в ЦСС :

Если перейти по ссылке, указанной в link , мы увидим, что сервис просто возвращает набор ЦСС ‑правил, которые встраиваются браузером в код страницы как стили:

То же самое мы можем сделать вручную со своими шрифтами. Главное — иметь исходники необходимых шрифтов.

Подключение шрифтов вручную

Для подключения шрифтов используется специальное ЦСС ‑правило @font-face , которое мы видели в примере выше. Его нужно вставить в ЦСС ‑файл на верхнем уровне:

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

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

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

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

Самый продвинутый формат шрифтов на сегодня — WOFF 2.0 . Он разработан специально для веба и содержит внутри себя TTF или OTF , но с компрессией. WOFF 1.0 имеет меньшую компрессию, но поддерживается бо́льшим количеством браузеров.

Любой шрифт можно конвертировать в другой формат через какой‑нибудь сервис. Я обычно использую Font Squirrel. В нём можно настроить набор символов, высоту строки, конвертировать шрифт в другие форматы и многое другое:

Настройка шрифта в шапке с меню

Теперь доведём до ума нашу шапку с меню. Мы остановились на таком результате:

Подключим шрифт в формате WOFF 2.0 (32 КБ) и укажем WOFF 1.0 (43 КБ) , как запасной вариант:

В макете мы используем Arial, но для наглядности поставим основным шрифтом Rubik, а Arial запасным:

Исследования показывают, что в почтовых программах до 43% email-подписчиков отключено отображение картинок. Это означает, что донести до них нужную информацию с помощью email-рассылки можно только если использовать реальный текст в HTML-версиях писем.

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

Основы типографики

Одна из главных задач при верстке почтовых рассылок заключается в том, чтобы убедиться, что почтовые клиенты и движки рендеринга не делают с письмами ничего странного. Когда дело касается текста, то решить большую часть возможных проблем можно с помощью добавления пары стилей. Например, при использовании подхода
К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).

Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в
В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.

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

Данный метод хорошо описал дизайнер Пол Эйри (Paulr Airy). Его суть заключается в использовании веб-шрифтов, которые не установлены на устройстве пользователя. Делается это с помощью их включения в CSS. В вебе этот метод давно и успешно применяется, но среди email-дизайнеров только набирает популярность.

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

Затем в инлайн-стилях можно добавить нужный шрифт в декларацию font-family :

Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.

Многоколоночный вид без табличных ячеек

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

Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.

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

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

Почтовые клиенты, которые поддерживают кастомные шрифты:

iOS Mail и Apple Mail;
Outlook 2016 и Outlook 2011 for Mac;
Android App и Android Mail 2.3, 4.2, 4.4;
Lotus Notes 8.

Почтовые клиенты, где происходит замена пользовательского шрифта на стандартный:

Как добавить свой шрифт в eSpuntik?

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

2. Для перехода к установке кликните по кнопке “Добавить шрифт” в открывшемся окне.

3. Введите данные о шрифте:

его название,
URL с CSS-файлом,
семейство.

Все поля нужно заполнить обязательно.

Краткая инструкция, где взять эти данные, откроется, если развернуть блок ”Как подключить шрифт из Google Fonts”.

После этого нажмите кнопку “Готово”.

Как подключить шрифт из Google Fonts?

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

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

Нажмите "Select this style" для выбора стиля шрифта и показа блока с его параметрами.

Выберите один из вариантов, так как несколько стилей одновременно не загрузятся. Если вам нужно все семейство шрифта, то его также нужно загружать поочередно, например: вначале добавляется regular, затем medium, bold и т.д. В редактор eSputnik они будут добавлены как отдельные шрифты.

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

Вставьте скопированную ссылку в поле “URL c CSS-файлом” в окне eSputnik:

Сразу укажите название шрифта, чтобы потом его легко найти в общем списке:

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

Вставьте в поле “Семейство”:

Для сохранения настроек нажмите “Готово”.

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

Для установки шрифта выберите “Перезагрузить сейчас”. И подтвердите перезагрузку страницы.

Как добавить собственные шрифты?

Чтобы загрузить собственный шрифт, нужно добавить в редактор eSputnik ссылку на css файл. Если ссылка у вас уже есть - переходите сразу к пункту 5, если нет - начинайте с первого пункта.

1) Нужно файл шрифта в формате .ttf добавить на сервис fontsquirrel.

2) Скачайте архив, где будет файл stylesheet.css

3) В полученный файл нужно добавить src, где на вашем сервере лежит необходимый шрифт в формате woff2 (шрифт в этом формате будет в архиве), например:

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

Чтобы отредактировать, удалить шрифт или добавить новый, зайдите в “Мои шрифты”.

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

Особенности работы с пользовательскими шрифтами:

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

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

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

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

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

Как добавить шрифты в файл Word

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

Лучше активировать эту опцию, если вы используете не только системные стили. У вас ведь не будет возможности установить свою каллиграфию на чужой ПК.

Установка шрифта в ОС

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

Дальнейшая установка шрифтов осуществляется так:

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

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

Как добавить шрифты в устройства Android

Мобильная операционная система Android еще недавно разрешала в полуавтоматическом режиме распознавала файлы форматов TTF и OTF и интегрировала дополнительный контент в стороннее программное обеспечение. Но после нескольких обновлений правила поменялись и действовать приходится иначе:

Активировать Root-права (с задачей справится KingRoot) и загрузить файловый менеджер FX File Explorer для взаимодействия с шрифтами;
Найденные на внутренней или внешней памяти файлы форматов OTF или TTF предстоит просмотреть и скопировать через специальное контекстное меню;
После предстоит воспользоваться иконкой MS Word и с помощью Root-прав запустить проверку «исследования данных» (редактор отобразит дополнительное меню с настройками) с доступом к разделу «Шрифты»;
Последний шаг – переместить скопированный файл в появившийся каталог и перезагрузить MS Word.

Как установить выбранный шрифт в Word по умолчанию

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

Как импортировать шрифты в Word на Mac

Чтобы добавить шрифты в Word на Mac, найдите файл шрифта и дважды щелкните его.

Появится окно предварительного просмотра шрифта. Нажмите «Установить шрифт» в правом нижнем углу окна.

Теперь шрифт установлен на вашем Mac и будет отображаться в различных приложениях, таких как Excel, PowerPoint и Word.

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

Читайте также: