現時点では、メールクライアントにおけるカスタムフォントへの対応はiOS・MacOSのApple Mailに限られます。この点に注意し、カスタムフォントを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。
動画チュートリアル：FigmaからエクスポートするHTMLメールにカスタムWebフォントを埋め込む
この動画では、FigmaのEmailifyプラグインを使って、FigmaからエクスポートするHTMLメールにカスタムWebフォントを（Webセーフな代替フォントとともに）埋め込む方法を解説します。
カスタムWebフォントのURLを埋め込む
カスタムフォントを使う場合は、.woffまたは.woff2フォントファイルのURLへの直接リンクを追加する必要があります。これは、プラグインのPreviewパネルにあるConfigure Fontsボタンをクリックして行えます。
ここで、メールデザインで使っている各カスタムフォントへのリンク（例：https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff）を貼り付けると、エクスポートしたHTMLに@font-faceのCSSルールとして含まれます。
必ず.woffまたは.woff2のWebフォントファイルに直接リンクしてください。CSSの埋め込み用リンクしかない場合は、そのリンクをブラウザで開くと、中にフォントファイルへのurlリンク（例：https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff）があるはずなので、それをコピーしてプラグインに貼り付けます。
カスタムフォントの埋め込みに対応しているのはiOS・MacOSのApple Mailのみです。 現時点では、メールクライアントにおけるカスタムフォントへの対応はiOS・MacOSのApple Mailに限られます。この点に注意し、カスタムフォントを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。
Webセーフな代替フォントの設定とプレビュー
メールでカスタムフォントを使っている場合は、カスタムフォントごとにWebセーフな代替フォントを設定できます。HTMLメールをカスタムフォントに対応していないメールクライアントで表示したときは、この代替フォントが表示されます。
同じConfigure Fontsの設定パネルで、Googleフォントやカスタムフォントの代替フォントも指定できます。
メールのカスタムWebフォントにWebセーフな代替フォントを指定している場合は、Emailifyのプレビューウィンドウ下部にあるShow Fallback Fontsスイッチを切り替えて、表示を確認できます。
Webセーフな代替フォントの一覧
Figmaのメールデザインで使っているカスタムWebフォントに設定できる、Webセーフなフォントは以下のとおりです。カスタムフォントの埋め込みに対応しているのはiOS・MacOSのApple Mailのみなので、ここで指定する代替フォントによって、残念ながらカスタムフォントに対応していないほかのすべてのメールクライアント（Outlook、Gmailなど）で表示されるフォントが決まります。
Sans-SerifのWebセーフな代替フォント
- Arial
- Arial Black
- Tahoma
- Trebuchet MS
- Verdana
SerifのWebセーフな代替フォント
- Georgia
- Times New Roman
MonospaceのWebセーフな代替フォント
- Courier New
メールでGoogleフォントを使う
Figmaに標準で含まれているGoogle Fontsライブラリのフォントを使っているFigmaレイヤーについては、EmailifyがHTMLのエクスポートにGoogleフォントの@importコードを自動的に含めます。
Googleフォントは、メールでの@font-faceの使用に対応しているメールクライアントでのみ表示されます。カスタムフォントに対応していないメールクライアントでは、代わりにWebセーフな代替フォント（例：「Arial」「Georgia」「Courier」）が自動的に読み込まれます。
Googleフォントに対応しているのはiOS・MacOSのApple Mailのみです。 現時点では、メールクライアントにおけるカスタムフォントへの対応はiOS・MacOSのApple Mailに限られます。この点に注意し、カスタムフォントを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。
画像でカスタムフォントを使う すべてのメールクライアントでカスタムフォントの見た目を確実に統一したい場合は、テキストレイヤーを「Image」フレームの中に入れるのも一案です。このテキストコンテンツは画像の一部としてエクスポートされるため、正しく表示されるかどうかがカスタムWebフォントへの対応に左右されません。