HTMLメーラーでカスタムフォントをインポートする方法（HTML Eメール）

私はHTMLメーラー（HTML Eメール）を使用しており、受け取ったデザインにはカスタムフォントが含まれています。 HTMLメールでカスタムフォントを使用するにはどうしたらいいですか？HTMLメーラーでカスタムフォントをインポートする方法（HTML Eメール）

ありがとうございます。

出典

2017-04-17 Preetham Hegde

まず第一に、ウェブフォントは現在、これらの電子メールクライアントでサポートされている含めます：

AOLメール
ネイティブAndroidのメールアプリ（ではないのGmailアプリ）
Apple Mailの
iOSのメール
Outlook 2000の
Outlook.com

（例。そのGmailのウェブ、ヤフー、またはWindowsのOutlook新しいバージョンでカスタムWebフォントを表示する方法はありません）

ステップ1：フォントはすでにGoogle Fontsのようなサービスでホストされている場合、それができますそのようにHTMLの<head>セクションでそこから参照：

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

また、@importメソッドを使用することもできます。

<style> 
    @media screen { 
     @import url('https://fonts.googleapis.com/css?family=Roboto'); 
    } 
</style>

Outlookはウェブフォントをサポートしていないので、Outlookはすべて一緒にこれを無視行います@mediaタグでラップ、この参照にチョークでしょう。

フォントはすでにオンラインにできませんが、あなたは、フォントファイルがある場合、それはfont squirrelなどのツールを使用してWebフォントに変換することができます。結果のファイルは、サーバーにアップロードし、そのように参照することができます。

@media screen { 
    @font-face { 
     font-family: {font-name}; 
     src: url({http://www.website.com/font-url}) format('woff'), 
      url({http://www.website.com/font-url}) format('truetype'); 
     font-weight: normal; 
     font-style: normal; 
    } 
}

注：this article by Litmusをチェックアウトし、電子メールでのWebフォントを参照する方法に深いダイビングのために。

ステップ2：そこから、フォントスタックのWebフォントを参照すると、ウェブフォントをサポートする電子メールクライアントに表示されます。（例えばGmailのウェブ、ヤフー、またはWindowsのOutlook新しいバージョンなど）はサポートのWebフォントを行わない

font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;

メールクライアントは、カスタムフォントをスキップし、フォントスタックに記載されたフォールバックフォントを表示しようとします。

出典

2017-04-17 17:47:58

お返事いただき、私の質問を編集していただきありがとうございます。 –

HTMLメールでカスタムフォントを使用するのは悪い習慣です。しかし、あなたはそうのようにそれらを使用することができます：カスタムフォントは<head></head>タグ

の間のどこか

<style> 
@font-face { 
    font-family: FontName; 
    src: url(http://www.fonts.com/fontname.otf); 
} 
</style>

をホストし、要素をインラインに適用

<h1 style="font-family: FontName">My heading</h1>

出典

2017-04-17 13:25:27 Vadzim

ありがとうございます。しかし、それは動作していませんでした。 –

HTMLメーラーでカスタムフォントをインポートする方法（HTML Eメール）

答えて

関連する問題