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

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

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

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

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

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

11
css email font-face html-email mailchimp

2 ответов

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

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

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

<!--[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]-->
9

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

Access-Control-Allow-Origin: *
1