カスタム フォントは、非常にスタイリッシュに見え、電子メールに新鮮さを与えます。 しかし、ほとんどの電子メール クライアントは、その使用をサポートしていません。 これは、電子メールに適切な HTML コードを使用することで回避できます。 ほとんどのユーザーがデフォルトの Web フォントを使用している一方で、カスタム フォントの使用感を好むユーザーもいることは、注目に値します。 場合によっては、新しいフォントをインポートしてメールに適用するコマンドを直接使用することもできます。 なお、「@font-face」と「@import」コマンドは、Apple Mailとごく少数の他のクライアントでのみ利用可能です。
ここでは、これらのコマンドの機能を HTML コードで使用する方法を説明します。 これにより、インポートしたフォントやカスタム フォントを電子メールで使用することができます。 このためには、基本的なHTMLの知識が必要かもしれません。
電子メールにカスタムフォントを埋め込むにはどうすればよいのでしょうか
順を追って説明します。
- まず、HubSpotのアカウントにアクセスするか、まだ持っていない場合は作成し、「マーケティング」→「ファイルとテンプレート」→「デザインツール」の順にクリックします。
- さて、あなたは以下のコードをコピーして、あなたのHTMLコードの<head>セクションに貼り付けることができます。 このコードテンプレートは、特定のカスタムフォントを使用したい場合に、メールに使用するものであることを忘れないでください。 貼り付けるコードは <style> タグの間にあるべきで、font-family とソース URL を選択したフォントに置き換えます。 DeliciousRoman;
src: url(https://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
}
</style>” - 最後に、メールの本文でフォントを参照したい場合があるかもしれません。 これは、電子メールの本文の最後に配置することができ、次のコードで行います:
“<span style=”font-family: DeliciousRoman;”>Describe what you have to offer the customer.</span>” - 最後のステップとして、メール テンプレートにその他の編集や変更を加え、[変更を公開] をクリックするだけで、完了します。 これで、このテンプレートを使用するメールには、最初のコードで選択したカスタム フォントが使用されるようになります。 このコードは、独自のHTMLコードをメールに実装できるメールクライアントであれば、どれでも使用できます。
メモ
このプロセスはHubSpotを股に掛けていますが、生成したHTMLコードは任意のメールクライアントで独自に使用することができます。 そのためには、メールクライアントのメインの書き込み機能を切り替えるだけでよいのです。 これはOutlookとGmailのプラットフォームで行うことができます。
メールに使用するさまざまなWebフォントは、Google Fontsで見つけることができます。 ページ内のすべてのフォントは無料で使用でき、かなりの数のオプションから選ぶことができます。 なお、フォントの入手先として、以下のようなページもありますが、これらは有料です。 MyFonts、Commercial、FontSpring、Typotheque、Village、FontShop、Process Type Foundryなどです。
また、一部のメールクライアントでは、すべての電子メールで利用可能なデフォルトのフォントタイプがあることに留意してください。 Apple MailはHelveticaを、GmailはArialを、Microsoft OutlookはCalibriを使用しています。
最後に、Google Fonts を使用している場合、フォントの URL は将来変更される可能性があることを知っておく必要があります。
Conclusion.
メールマーケティングに携わっている方や、メールをカスタマイズしたい方には、この方法が手っ取り早いでしょう。 カスタムフォントを持つことで、他のほとんどのメールと同じように見えないというだけで、読者があなたのメールにもっと興味を持つようになります。
この記事が気に入ったら、そのブログもチェックしましょう。