Работает ли @font-face в шаблонах электронной почты?

Есть ли способ встраивать пользовательские веб-шрифты с помощью CSS @font-face в шаблоны электронной почты. Этот вопрос специально связан с шаблонами электронной почты в MailChimp, но я также хотел бы узнать, существует ли кросс-браузерное решение, которое работает во всех или большинстве сервисов подписки на электронную почту?

Я рассмотрел его включение в заголовок стиля следующим образом:

@font-face {
   src: url("http://www.remoteserver.com/fonts/font.otf");
   font-family: Font;
}

Но я боюсь, что это сильно повлияет на загрузку страницы. Есть ли лучший способ?

Обновление. Для поиска универсального решения это НЕ Google шрифты или шрифты, которые существуют в любой онлайн-библиотеке источников.

Ответы

Ответ 1

Вы можете! Но со всеми удобствами в html-email он не будет работать в каждом клиенте/браузере.

@font-face будет работать в iOS и (большинстве) Android-клиентах по умолчанию, Apple Mail и Outlook 2011 для Mac. Все остальное либо удаляет весь тэг <style>, либо просто игнорирует его.

Некоторые меры предосторожности: шрифтовое лицо выводит Outlook'07 -'13, поэтому оберните свой CSS-шрифт в свой собственный тег стиля в условном выражении MSO. Убедитесь, что вы используете все типы файлов шрифтов в @font-face - otf, ttf, eot, svg, поэтому он работает в браузерах. Затем убедитесь, что у вас есть хорошие резервные копии, когда вы пытаетесь их использовать. По крайней мере, вы должны иметь font-family:'Custom Font',sans-serif; (или засечку).

<!--[if !mso]><!-->
<style type="text/css">
    @font-face {
    font-family: 'Custom-Font';
    font-weight: 400;
    font-style: normal;
    src: url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-Regular') format('svg'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix') format('embedded-opentype'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff') format('woff'), 
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf')  format('truetype');
    }
</style>
<!--<![endif]-->

Ответ 2

Один из них - это совместное использование ресурсов Cross-origin (CORS). По крайней мере Thunderbird вы должны убедиться, что удаленный сервер (который размещает шрифт) отправляет HTTP-заголовок, например:

Access-Control-Allow-Origin: *