web-dev-qa-db-ja.com

MailChimpテンプレートでgoogle webfontsを使用することは可能ですか？

私はMailChimpにgoogle webfontsを組み込もうとしましたが、解決策を得ることができません。

@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内でカスタムフォントを使用できる人はいますか？

html-emailmailchimp
12
RustyDev

@import構文では不可能であることがわかりました。タグを使用して動作します：

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

すべてのメールでカスタムフォントを使用していますが、 google を使用していません。 Googleのウェブフォントの使用に問題がある場合は、独自のサーバーでファイルをホストし、代わりに使用することをお勧めします。

私にとって、私は webfontsstylesheet を次のようにインポートします：

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

また、スタイル宣言の下に conditional-comments を追加して、 Outlook でのWebフォントのフォールバックを強化しています。これがないと、OutlookはWebフォントを適切なものに置き換え、フォールバックフォントを尊重しない可能性があります。ただし、この条件付きコメントを宣言し、クラスでテキストを追加のスパンでラップすると、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>

これは、画像の代替テキストに次のようなスタイルを設定する場合にも機能します。

<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>
7
davidcondrey

最近、mailchimpを使用してメールをたくさん作成しており、しばらく頭を悩ませていました。これらは私の発見です：

  • グーグルフォントで動作します。

  • @importは、他のサイト、そしてグーグル（例えば、あなたの個人サイトなど）を通じてホストされているフォントに対して機能します。

  • 次のようなものを使用します：

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

  • googleフォントに@importを使用すると、mailchimpでエラーが発生します（投稿されたホライズンなど）。

  • base64も機能します。しかし、コードは長くなり、他の問題を引き起こす可能性があります。

  • FirefoxはMailchimpプレビューでフォントをブロックします（httpsであるため）。

PS：異なるが関連するトピック：応答性の高いメールを作成することは、インターネットの人々が主張するほどひどいことではありません。

1
Leopold Kristjansson