---
url: "/ja/emailify/design/fonts.md"
description: "カスタムWebフォントに対応しているのはiOS・MacOSのApple Mailのみです。これらのクライアント向けにフォントを埋め込み、ほかのすべてのメールクライアント向けにWebセーフな代替フォントを設定できます。"
---

# メールでWebフォントを使い、Webセーフな代替フォントを追加する

> カスタムWebフォントに対応しているのはiOS・MacOSのApple Mailのみです。これらのクライアント向けにフォントを埋め込み、ほかのすべてのメールクライアント向けにWebセーフな代替フォントを設定できます。

> **Warning:** 現時点では、[メールクライアントにおけるカスタムフォントへの対応](https://www.caniemail.com/features/css-at-font-face/)は**iOS・MacOSのApple Mail**に限られます。この点に注意し、カスタムフォントを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。

### 動画チュートリアル：FigmaからエクスポートするHTMLメールにカスタムWebフォントを埋め込む

この動画では、FigmaのEmailifyプラグインを使って、FigmaからエクスポートするHTMLメールにカスタムWebフォントを（Webセーフな代替フォントとともに）埋め込む方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/dtTNDXeO3FA)

## カスタムWebフォントのURLを埋め込む {#adding-custom-web-font-url-embeds}

[Video](/assets/videos/emailify/design/applying-web-fonts.mp4)

カスタムフォントを使う場合は、`.woff`または`.woff2`フォントファイルのURLへの直接リンクを追加する必要があります。これは、プラグインの**Preview**パネルにある**Configure Fonts**ボタンをクリックして行えます。

ここで、メールデザインで使っている各カスタムフォントへのリンク（例：`https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff`）を貼り付けると、エクスポートしたHTMLに`@font-face`のCSSルールとして含まれます。

> **Note:** 必ず`.woff`または`.woff2`のWebフォントファイルに直接リンクしてください。CSSの埋め込み用リンクしかない場合は、そのリンクをブラウザで開くと、中にフォントファイルへの`url`リンク（例：`https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff`）があるはずなので、それをコピーしてプラグインに貼り付けます。

> **Warning:** **カスタムフォントの埋め込みに対応しているのはiOS・MacOSのApple Mailのみです。** 現時点では、[メールクライアントにおけるカスタムフォントへの対応](https://www.caniemail.com/features/css-at-font-face/)は*iOS・MacOSのApple Mail*に限られます。この点に注意し、カスタムフォントを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。

## Webセーフな代替フォントの設定とプレビュー {#setting-and-previewing-web-safe-fallback-fonts}

[Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4)

メールでカスタムフォントを使っている場合は、カスタムフォントごとに[Webセーフな代替フォント](#list-of-web-safe-fallback-fonts)を設定できます。HTMLメールを[カスタムフォントに対応していないメールクライアント](https://www.caniemail.com/features/css-at-font-face/)で表示したときは、この代替フォントが表示されます。

同じ**Configure Fonts**の設定パネルで、Googleフォントやカスタムフォントの代替フォントも指定できます。

メールのカスタムWebフォントに[Webセーフな代替フォント](#list-of-web-safe-fallback-fonts)を指定している場合は、Emailifyのプレビューウィンドウ下部にある**Show Fallback Fonts**スイッチを切り替えて、表示を確認できます。

### Webセーフな代替フォントの一覧 {#list-of-web-safe-fallback-fonts}

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フォントを使う {#using-google-fonts-in-your-emails}

Figmaに標準で含まれている[Google Fontsライブラリ](https://fonts.google.com/)のフォントを使っているFigmaレイヤーについては、EmailifyがHTMLのエクスポートにGoogleフォントの`@import`コードを自動的に含めます。

Googleフォントは、メールでの[@font-faceの使用に対応しているメールクライアント](https://www.caniemail.com/features/css-at-font-face/)でのみ表示されます。カスタムフォントに対応していないメールクライアントでは、代わりに[Webセーフな代替フォント](#list-of-web-safe-fallback-fonts)（例：「Arial」「Georgia」「Courier」）が自動的に読み込まれます。

> **Warning:** **Googleフォントに対応しているのはiOS・MacOSのApple Mailのみです。** 現時点では、[メールクライアントにおけるカスタムフォントへの対応](https://www.caniemail.com/features/css-at-font-face/)は*iOS・MacOSのApple Mail*に限られます。この点に注意し、カスタムフォントを「プログレッシブエンハンスメント」として考えてメールをデザインしてください。

> **Tip:** **画像でカスタムフォントを使う** すべてのメールクライアントでカスタムフォントの見た目を確実に統一したい場合は、テキストレイヤーを「Image」フレームの中に入れるのも一案です。このテキストコンテンツは画像の一部としてエクスポートされるため、正しく表示されるかどうかがカスタムWebフォントへの対応に左右されません。