@ font-faceがhtmlメールで動作しない

ニュースレター/ htmlメールでカスタムフォントを使用しようとしています。私はSafari、Firefox、Chromeで@ font-faceのインポートを行っていますが、電子メールクライアント（appleメール、thunderbird、gmailでテスト済み）で使用しようとするとカスタムフォントは表示されません。私はこれについていくつかの記事を読んでいますが、提案された解決策はメールクライアントがサポートされているかどうかをチェックしています。 Googleのフォントでも動作しません。だから何が間違っているかもしれない他の提案がありますか？@ font-faceがhtmlメールで動作しない

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="x-apple-disable-message-reformatting"> 

    <!--[if !mso]><!--> 
    <style type="text/css"> 
    @font-face { 
      font-family: 'myfont'; 
      src: url('https://example.com/various/myfont-Regular.eot'); 
      src: url('https://example.com/various/myfont-Regular.woff2') format('woff2'), 
       url('https://example.com/various/myfont-Regular.woff') format('woff'), 
       url('https://example.com/various/myfont-Regular.ttf') format('truetype'), 
       url('https://example.com/various/myfont-Regular.svg#FreelandforDouglas-Regular') format('svg'), 
       url('https://example.com/various/myfont-Regular.eot?#iefix') format('embedded-opentype'); 
      font-weight: normal; 
      font-style: normal; 
     } 
    </style> 
    <!--<![endif]--> 
</head>

出典

2017-11-27 Tobias Grunwald

一部のメールクライアントは外部フォントをサポートしていないと思います。このリンクを見て、CSSクライアントと電子メールクライアントの包括的なガイドをご覧ください。 http://www.campaignmonitor.com/css/ –

あなたが言及しているように、@font-face is not supported in some email clientsです。どのフォントを使用しているかによって、カスタムフォントで始まるフォントスタックを指定し、同様のシステムフォントにフォールバックすることができます。

私は、Webフォントに使用するこのコードは、このような何か行く：a few ways to reference web fonts in emailがあります

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="x-apple-disable-message-reformatting"> 

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

    <!--[if !mso]><!--> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'> 
    <!--<![endif]-->

を、私は<link>メソッドを使用して好みます。

代わりにあなたがFont Squirrel's Font Generatorを通して、あなたのフォントを実行し、@import方法を使用することができます。

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="x-apple-disable-message-reformatting"> 

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

    <!--[if !mso]><!--> 
    <style> 
     @font-face { 
      font-family: 'MyWebFont'; 
      src: url('http://www.website.com/webfont.eot'); 
      src: url('http://www.website.com/webfont.eot?#iefix') format('embedded-opentype'), 
       url('http://www.website.com/webfont.woff2') format('woff2'), 
       url('http://www.website.com/webfont.woff') format('woff'), 
       url('http://www.website.com/webfont.ttf') format('truetype'), 
       url('http://www.website.com/webfont.svg#svgFontName') format('svg'); 
     } 
    </style> 
    <!--<![endif]-->

あなたはこれらのフォントフォーマット（例えば、すべてのを必要としないかもしれませんが、あなたがおそらくSVGを必要としませんフォーマット）、私はテストをお勧めしたい。

出典

2017-11-27 12:58:55

返信いただきありがとうございます。あなたが私に与えたリンクで、Apple Mailはサポートされていると表示されていますが、動作しません。私も前にリンク方法を見たが、Web上にまだないカスタムフォントでそれを使う方法を理解していなかった。どのようにガイドを作成するのか知っていますか？ –

@TobiasGrunwaldカスタムフォントはウェブ上に存在する必要があるので、電子メールからそれらを参照することができます。したがって、Web上にまだない場合は、次のステップに進む必要があります。 –

はい、ウェブ上にあります。私はそれらを私のウェブサーバにアップロードしたので、彼らはすでにブラウザで作業しています。しかし、私はCSSファイルを提供する必要がありますリンクメソッドを使用して、右か？そして、私はこのCSSファイルにフォントを含める方法を知らない。 –

@ font-faceがhtmlメールで動作しない

答えて

関連する問題