8

Есть шрифт Bender - нужно подключить в верстку. Как правильно это сделать в html-письме?

Proshka
  • 1,514

1 Answers1

11

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

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Georgia, serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail).

источник

P.S: вот такая конструкция в head позволяет гугл шрифты подключить, но за поддержку не скажу:

<!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
        <style>
            * {
                font-family: sans-serif !important;
            }
        </style>
    <![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
    <!--<![endif]-->

  <!-- Web Font / @font-face : END -->

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

SVE
  • 22,387
  • этак конструкция подключает все Google- шрифты или их нужно прописать дополнительно? – Proshka May 03 '17 at 13:27
  • @Proshka, там же видно что только робото //fonts.googleapis.com/css?family=Roboto:400,700' – SVE May 03 '17 at 13:47
  • 1
    да, да, спешу, не замечаю. Спасибо – Proshka May 03 '17 at 14:06