作成日
2 September 2013
Adobe Edge Animate CC(以下、「Edge Animate」)では、テキストのフォントとして、Webフォントを簡単に利用できる仕組みが用意されています。本記事では、Webフォントの使い方を紹介します。
※Adobe Creative Cloudに登録すれば、無償メンバーシップでもEdge Animate CCの体験版(30日間)を利用できます。
Edge Animateには、同じEdge ツール&サービスの製品であるEdge Web Fontsと連携する機能があります。Edge Web Fontsを利用して、Webフォントを適用する手順は以下の通りです。
- テキストを選択し、[プロパティ]パネルのフォント欄右横の[+]ボタンをクリックします。
- [Edge Web Fonts]パネルが表示され、アドビ システムズ社のWebフォント配信サービス「Typekit」に登録されているフォントの一覧が表示されます。
- 使用したいフォントを選択して[フォントを追加]ボタンを押すと、そのフォントが適用され、同時に[ライブラリ]パネルの[フォント]欄に登録されます。

[Edge Web Fonts]パネルには、希望のフォントを探しやすいように、検索機能とフィルター機能があります。パネル上端の検索ボックスに文字列を入力すると、その文字列を持つフォントのみを一覧表示します。また、パネル左端にある各フィルターボタンを押すと、対応するフォントのみを一覧表示します。
アイコン
|
説明
|
---|---|
![]() |
見出しに適したフォント |
![]() |
本文に適したフォント |
![]() |
serif系フォント |
![]() |
sans-serif系フォント |
![]() |
slab系フォント |
![]() |
script系フォント |
![]() |
blackletter系フォント |
![]() |
monospace系フォント |
![]() |
hand系フォント |
![]() |
decolation系フォント |

適用したWebフォントのは、Edge Animate上でプレビュー可能です。Webフォントは、その性質上、インターネットに繋がっている状態でないと利用できません。また、フォント情報を読み込むまでは反映されない点に注意しましょう。
[Edge Web Fonts]パネル内のWebフォントではなく、任意のWebフォントサービスのフォントを利用したい場合には、カスタムフォントとして登録・利用することも可能です。カスタムフォントとして登録する手順は以下の通りです。
- [カスタム]タブを選択し、[フォント代替リスト]欄にフォント名を入力します。
- [埋め込みコード]欄に、フォントを利用する際に必要なタグを入力します(タグの内容は、各Webフォントサービスベンダーによって異なります)。
- [フォントを追加]ボタンを押すと、カスタムフォントが[ライブラリ]の[フォント]欄に追加され、利用可能となります。

カスタムフォントを利用した場合、Edge Animate内のステージにはWebフォントが反映されない場合があります。このような場合では、プレビューやパブリッシュを行いブラウザー上で確認すると反映されます。
登録したWebフォントの削除や、カスタムフォントの削除/内容の変更は、[ライブラリ]パネル内の[フォント]欄から該当フォントを選択して、[Delete]で削除、ダブルクリックで編集を行うことができます。