'
Articles

The Ultimate Guide to Web Fonts

author
3 minutes, 19 seconds Read

Historically, the right font for your email has never been too hard considering the limited number of web safe fonts to choose from.これは、メールに使用するフォントを選択する際に、限られた数のウェブセーフフォントを考慮したものです。 しかし、状況は変わりました。 より多くのメール デザイナーが境界線を押し広げ、Web デザイナーが長年使用してきた開発テクニックと同じものを採用し、メールに Web フォントを実装しています。

Web フォントのおかげで、Web デザイナーはタイポグラフィーでより創造的になり、デザインに標準以外のフォントを選択できるようになりました。 Campaign Monitor のウェブ フォントの素晴らしいガイド、Paul Airy の「A Type of Email」、そして Style Campaign のインスピレーションに大いに感謝します。

The Ultimate Guide to Web Fonts では、ウェブ フォントとは何か、メール デザイナーはどのようにしてメールにそれらを実装できるかを詳しく説明します。

Webフォントとは何ですか？

メールデザイナーがメールに使用するフォントには、WebセーフフォントとWebフォントの2種類があります。 ここでは、この2つの違いについて説明します。

  • Web セーフ フォント
    Web セーフ フォントの代表例として、Arial、Times New Roman、Verdana、または Georgia を考えてみてください。 これらは、さまざまなオペレーティング システムやデバイスの大部分で見られるデフォルトのフォントです。
  • Web フォント
    Web フォントは、さまざまなデバイスやオペレーティング システムで利用できるデフォルト フォントの一部としてではなく、Web サイトでの使用のために特に設計およびライセンスされたフォントです。 Web フォントには、Open Sans や Roboto があります。

Web フォントを使用する理由

マーケティング担当者やデザイナーとして、色、デザイン、そして、タイポグラフィーで、電子メールでブランドを維持しなければならないというプレッシャーをご存知でしょう。 重要なコピーを画像の中に閉じ込めることは、ブランドを維持し、クリエイティブであるための方法として、Eメールのデザインにおける標準的な慣習となっています。 しかし、画像にテキストを「隠す」と、スクリーンリーダーが画像上のテキストを読めないため、メールのアクセシビリティが制限されます。

Webフォントは、タイポグラフィにおける創造性の新しい道を開き、メールデザイナーが創造的でアクセシブルでありながらブランドの外観と雰囲気を維持できるようにします。

Email と Web フォント

Web フォントはユニバーサル サポートではありませんが、サポートされているメール クライアントは次のとおりです：

  • Apple Mail
  • iOS Mail
  • Google Android
  • Samsung Mail (Android 8.0）
  • Outlook for Mac
  • Outlook App

サポートするメールクライアントのリストは短いように見えますが、そのほとんどが最も人気のあるメールクライアント上位 10 社に入っていることにご留意ください。 それは興奮すべきことです！

*Pro Tip: 2018年4月に、GmailはWebメールクライアントの更新されたインターフェイスをリリースしました。 この新しいインターフェースは、2つの人気のあるウェブフォントを使用しています。 Google SansとRobotoです。 これは何を意味するのでしょうか。 Gmailはウェブフォントをサポートしていないにもかかわらず、これらのウェブフォントのいずれかをメールに使用すると、実際にGmailでレンダリングされます。

Discover your top 10

メールマーケティングに関しては、あなたの視聴者がすべてです。 Litmus Email Analyticsを使用して、購読者に最も人気のあるメールクライアントを発見してください。 2726>

Discover your audience →

メールにWebフォントを組み込む方法

メールにWebフォントを使用する場合、主に3つのアプローチを取ることができます。 次のコード行を電子メールの <head> 内、通常は <style> の一番上に配置します。

@import url('https://fonts.googleapis.com/css?family=Montserrat');

この例では、インポートした font-family の名前は「Montserrat」です。

この方法は、上記のほとんどのメール クライアントで十分にサポートされており、Android 2.3 (Android Gingerbread) でのみサポートされています (市場シェアが非常に小さい、古い Android バージョンです)。 フォントファイルを自分でホストしている場合は、この URL を変更して、サーバー上のウェブフォントの場所を指すようにします。

<link> メソッドは、上記のすべてのメール クライアントでサポートされており、@import メソッドよりもわずかにパフォーマンスが優れています (万歳!)。 インポート メソッドは、インポートされる Web フォントの読み込みを、それが埋め込まれている HTML が完全に読み込まれるまで延期します。 このため、メールの他の部分が読み込まれている間に、ウェブフォントが表示されるまでに少し時間がかかることがあります。 逆に、<link> メソッドは、HTML ファイルのコードが読み込まれるときに（上から下へ）リソースをインラインで読み込みますので、Web フォント ファイルが特に大きい場合、メールの読み込みが遅くなる可能性があります。 電子メールに関しては、.woff 形式が最もよくサポートされているので、可能な場合はこの形式を使用することをお勧めします。 font-faceメソッドは、取り込みたいファイル形式を具体的に選択できる唯一のメソッドであり、Webフォントを実装するための最も弾丸のようなメソッドです。

Google Fonts を Web フォント サービスとして選択し、Web フォントを電子メールにインポートするための典型的な @font-face 宣言を以下に示します：

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

残念ながら、Google Fonts を使用している場合、Web フォントの URL を見つけるのは簡単ではありません。
Web フォントを検索して選択すると、画面の下に小さな黒いバーが表示されます。 それをクリックすると、次のような画面が表示されます。

2. Web フォントの URL をコピーし（上で強調表示）、Safari または Internet Explorer のアドレス バーにペーストします。 この方法では、.woff ファイル タイプを使用したいと思います。 Google Chromeを使用する場合は、サポートが限定されているブラウザで提供される.woff2フォントファイルタイプになります。 この余分な洞察を提供してくれた Elliot Ross に感謝します！

1 ページが読み込まれると、ページ上に CSS 宣言が表示されます。

3 この CSS をコピーして、メールの <style>セクションに貼り付けます。
この方法は最も強固だと考えられますが、Web フォント サービスのサプライヤーが、Web フォントを読み込むためのダイレクト アクセス URL を変更できる場合があります。

Litmus では、@font-face メソッドは、電子メールに Web フォントをインポートするための代表的な実装方法です。 E ニュースレター (まだ購読していなければ、ぜひ読んでみてください) で詳しく説明されています。

電子メールでの Web フォントの使用

一度 Web フォントをインポートしたら、インポート方法で定義した font-family 名を使用して、Web セーフ フォントを使用するのと同じくらい簡単に電子メールで使用できます：

font-family: 'Montserrat', sans-serif;

予備フォントを選ぶ

Webフォントを使う場合、Webフォントをサポートしないメール ソフト用に予備Webセーフ フォントを用意することが必要不可欠になります。

Default web safe fonts

各メール クライアントには、フォント ファミリ スタックにリストされているフォントが使用できない場合のデフォルトのフォントがあります。 たとえば、Gmail は Arial を使用し、Apple Mail は Helvetica を使用し、Outlook は Calibri を使用します。

これらのデフォルト フォントのいずれかが気に入らない場合、良い知らせがあります。 

font-family: 'Montserrat', Verdana, sans-serif;

これは、優先フォントの優先順位リストとお考えください。 たとえば、上記の font-family スタックを使用すると、Gmail ではサポートされていない Web フォントであるため、リスト内の最初のフォントを無視し、電子メールで表示されるフォントは Verdana になります。 Verdana が使用されているデバイスでサポートされていない場合 (Verdana は Web セーフなフォントなので、これは非常にまれなケースです)、デバイスはそのシステムのデフォルトの sans-serif フォントを使用し、これはリスト内の 3 番目のフォントになります。

正しいフォールバック フォントの選択方法

メールのデザインを維持する正しいフォールバック フォントを選択することは、どのメール クライアントを使っていても、すべての購読者にすばらしい体験を提供する鍵になります。

フォールバック フォントは、Web フォントと同じ種類にする必要があります。Web フォントがサンセリフ フォントの場合はサンセリフ フォールバック フォントを使用し、Web フォントがセリフ フォントの場合はセリフ フォールバック フォントを使用します。 同じスタイルのフォントを使用することで、異なるメールクライアントでもメールのデザインを維持することができます。 さらに一歩進んで、フォントのx-heightを分析することができます。

x-heightは、フォントの縦の高さです。 理想的には、フォールバック フォントが使用されているときに電子メールのデザインが崩れないように、同様の x ハイトを持つフォールバック フォントを選択する必要があります。

ここで、フォント Verdana、Arial、および Web フォント Proxima Nova の x ハイトにおける微妙な違いの例を挙げてみましょう。 これらの微妙な違いは、Web フォントがレンダリングされない場合、電子メールのデザインの成否を左右することがあります。

CSS Font Stack には、フォールバック フォントとして使用できる Web セーフ フォントの完全なリストがあり、オペレーティング システムの範囲も含まれています。 書体デザイナーは、フォントのすべての異なるスタイルを正しくするために多くの考えと努力を払っています。したがって、電子メール クライアントやブラウザが通常のフォントに無造作に擬似太字や擬似斜体を適用するのではなく、元のタイプ デザインを適用することが最善の方法です。

Basically do NOT this:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Web デザインと同様、これらのスタイルを @font-face スタックに含めることにより、以下のように純正フォントを取り込むことができます:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

ご覧のように、異なるスタイルは font-family にかかわらず異なるフォントを取り込むことができます。 このように、HTML で次のようにフォントのスタイルを設定すると:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…本物の「Montserrat-BoldItalic」フォントを取り込むことができます! 同様に、font-weight: bold; を追加するだけで ‘Montserrat-Bold’ が、font-style: italic; を追加するだけで ‘Montserrat-Italic’ が入ってきます。

では、なぜ各スタイルに異なる font-family を宣言せずこの方法で行い、本物のフォントも引っ張ってきたのかと思うかもしれませんが、それは、この方法で行ったからです。 これはどのように見えるか:

Do NOT do this, either,!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

This presents a problem. スタイルを格納するために font-family 名を使用すると、過度に複雑で冗長な CSS が作成されるだけでなく、フォールバックが起動したときにテキストからスタイルが剥奪されます。 たとえば、Gmail（カスタム Web フォントをサポートしていない）で上記のコードを表示している場合、Montserrat Bold Italic の代わりに、太字でも斜体でもない Verdana が表示されるだけでしょう。 font-family と font-weights/font-styles を別々にすることで、フォールバック フォントは正しいスタイルを保持します。

Outlook, what are you doing to me!

Times New Roman をデフォルトのフォールバック フォントとする Outlook は従来、タイポグラフィーに関心のあるメール マーケティング担当者にとって難題でした。 Outlook 2019、つまり Microsoft のデスクトップ電子メール クライアントの最新バージョンでは、コードで指定されたフォールバック フォントが尊重されますが、古い Outlook バージョンではまだ課題があります。

@font-face インポート方法を使用している場合、Outlook 2007/10/13/16 は、どのフォールバック フォントでも Times New Roman にデフォルトでなります。

次の CSS は、<!-> と <!-> で示されるように Outlook をターゲットにしており、異なるフォント スタックを使用するよう Outlook に指示します。

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

E メールで font-family を定義する場合はどこでも、クラス “fallback-font” を使用します:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

そして Outlook 2007/10/13 のフォントは Times New Roman よりも Arial に優雅にフォールバックします。

このバグに対する別の解決策は、@font-face インポート コードをメディア クエリでラップし、Outlook から隠します。

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

これにより、割り当てられたフォールバック フォントをデフォルトにするように Outlook for MS Office に指示します。 このサービスは完全に無料で、Adobe Photoshop、Sketch、またはその他のデザイン ソフトウェアでデザインをモックアップしている場合、Web フォントをコンピューターにダウンロードできます。

Typekit by Adobe

Adobeの人気フォント購読サービスは、これまで電子メール デザイナーにとってほとんど役に立たず、Typekitがフォントの埋め込みにJavaScriptに依存していたからです。 2017年8月現在、TypekitはJavaScript不要のCSSのみでWebフォントを使用できるようになり、Typekitで見つけたWebフォントをメールで使用することができるように開放されました。 Typekitのウェブフォントを@importを使ってメールに追加する方法については、Typekitのヘルプドキュメントで詳しく説明されています。

More Web Font Services

E メールで使用するためにライセンスされた Web フォントを提供するウェブサイトをさらに探している場合は、以下のサービスをチェックしてください（ほとんどが有料です）。

  • MyFonts
  • Commercial Type
  • Font Spring
  • Font Shop
  • You Work for Them
  • Village

    • など。

  • Process Type Foundry

Licensing Web Fonts in email

Web Fonts はもともと Web サイトでの使用のみを目的として設計されたものでした。 そのため、そのライセンスは通常、ウェブサイトとモバイルアプリケーションでの使用のみに限定されています。 多くの Web フォント サービスがメールでの使用を許可しない理由は、フォントを配布していると見なされ、多くのサービスのエンド ユーザー ライセンス契約 (EULA) に反するからです。

上記のリストにある Web フォント サプライヤーは、メールでの Web フォント使用に関するライセンスを含んでいます。 しかし、多くのライセンスは月間の開封数で課金されるため、有料のWebフォントサービスを使用する場合は考慮する必要があります。

Web フォントは使用できますか？

今すぐメールにWebフォントを段階的強化として使用してもまったく支障はありません。 フォールバック フォントを正しく実装し、メールを未来に押し出しましょう！

Web フォントをサポートするメール クライアントでメールを閲覧している購読者がどれだけいるか、見てみる価値はあります。 特に、有料の Web フォントの使用を検討している場合は、時間と労力を費やす価値はないでしょう。

Web fonts done right

何が可能か少し考えてみるために、Web フォントを使ったお気に入りの電子メールをいくつか紹介します。

View full email
View full email
View full email

Don’t forget to test

メールにおけるWebフォントの使用はまだ少し実験段階だと考えられるため、特に、頻繁に更新しないテンプレートにWebフォントを導入する場合、頻繁にテストすることをお勧めします。 メール クライアントのレンダリング機能に対する変更や更新は通常事前に発表されず、散発的に行われることがあるため、定期的にテストすることをお勧めします。

Web フォントを自分のコンピューターにインストールしている場合、自分のコンピューター上のメール クライアントでテストを行う際に、Web フォントを見ることができることは注目に値します。 キャンペーンを送信する前に、必ずテストしてください。 Litmus を無料でお試しいただき、デスクトップ、Web メール、モバイル デバイスなど 90 以上のメール クライアントで、あなたのタイポグラフィが驚くほど美しくなることをご確認ください。

Similar Posts

コメントを残す

メールアドレスが公開されることはありません。