Можно ли использовать веб-сайты google в шаблоне MailChimp?

Я пытаюсь включить веб-сайты google в MailChimp и не могу получить какие-либо решения для работы.

Я пробовал подход, указанный на сайте Campaign Monitor, с помощью @import:

http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

но я получаю эту ошибку при попытке предварительного просмотра:

An error occurred parsing your template CSS:
Cannot find a CSS file at: http://fonts.googleapis.com/css?family=Montserrat

Кто-нибудь мог использовать пользовательские шрифты в MailChimp?

Ответ 1

Оказывается, это невозможно в синтаксисе @import. Он работает с использованием тега:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

Ответ 2

Я использую пользовательские шрифты во всех своих письмах, но не через google. Если у вас возникли проблемы с использованием веб-сайтов Google, я рекомендую вам разместить файл на своем собственном сервере и попытаться использовать его.

Для меня я импортирую webfonts stylesheet следующим образом:

@import url('https://www.mydomain.com/en/img/cms/mail/_a/fonts/fonts.css');

Я также добавляю conditional-comments ниже мои декларации стиля для улучшения резервных копий webfont в outlook, Без этого Outlook, скорее всего, заменит ваш веб-сайт на все, что он хочет, и не будет уважать ваш резервный шрифт. Но если вы объявите этот условный комментарий, а затем оберните текст дополнительным интервалом с классом, Outlook будет уважать ваш резерв и использовать выбранный вами шрифт.

<!--[if gte mso 9]>
<style>
    .flowerpwr { font-family:Arial,sans-serif; }
    .proxima { font-family:Arial,sans-serif;font-weight:normal; }
    .proxima_novasemibold { font-family:Arial,sans-serif;font-weight:normal; }
</style>
<![endif]-->

html разметка выглядит так

<td align="center" style="font-family:'proxima_novaregular',Arial,sans-serif;font-size:16px;letter-spacing:0.04em;color:#333333;">
    <span class="proxima">Text here</span>
</td>

Это даже работает для стилизации изображения alt так:

<td>
    <a href="https://www.mylink.com/" target="_blank" style="display:block;font-family:'proxima_novaregular',Arial,sans-serif;color:#666666;font-size:16px;text-align:center;letter-spacing:0.04em;text-decoration:none;outline:none;">
        <span class="proxima">
            <img src="a3.jpg" alt="STYLED ALT TEXT WITH WEBFONT AND OUTLOOK MAINTAINED FALLBACK" border="0" style="display:block;">
        </span>
    </a>
</td>

Ответ 3

В последнее время я много строил электронные письма, используя mailchimp, и некоторое время ломал голову над этим. Вот мои выводы:

работает для шрифтов Google.
@import работает со шрифтами, размещенными на других сайтах, кроме google (например, на вашем личном сайте)
используя что-то вроде:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

использование @import для шрифтов Google приводит к ошибке в mailchimp (как, например, опубликованные горизонты).
base64 тоже работает. Но код может стать длинным и вызвать другие проблемы.
Firefox блокирует шрифты в предварительном просмотре Mailchimp (потому что это https).

PS: другая, но связанная тема: Создание адаптивных электронных писем не так ужасно, как утверждают люди в Интернете.