Adobe Edge Animate CC(以下、「Edge Animate」)では、テキストのフォントとして、Webフォントを簡単に利用できる仕組みが用意されています。本記事では、Webフォントの使い方を紹介します。

Adobe Creative Cloudに登録すれば、無償メンバーシップでもEdge Animate CCの体験版(30日間)を利用できます。

Webフォントの選択と登録

Edge Animateには、同じEdge ツール&サービスの製品であるEdge Web Fontsと連携する機能があります。Edge Web Fontsを利用して、Webフォントを適用する手順は以下の通りです。

  1. テキストを選択し、[プロパティ]パネルのフォント欄右横の[+]ボタンをクリックします。
  2. [Edge Web Fonts]パネルが表示され、アドビ システムズ社のWebフォント配信サービス「Typekit」に登録されているフォントの一覧が表示されます。
  3. 使用したいフォントを選択して[フォントを追加]ボタンを押すと、そのフォントが適用され、同時に[ライブラリ]パネルの[フォント]欄に登録されます。

[Edge Web Fonts]パネルには、希望のフォントを探しやすいように、検索機能とフィルター機能があります。パネル上端の検索ボックスに文字列を入力すると、その文字列を持つフォントのみを一覧表示します。また、パネル左端にある各フィルターボタンを押すと、対応するフォントのみを一覧表示します。

フィルターボタン
アイコン
説明
見出しに適したフォント
本文に適したフォント
serif系フォント
sans-serif系フォント
slab系フォント
script系フォント
blackletter系フォント
monospace系フォント
hand系フォント
decolation系フォント

適用したWebフォントのは、Edge Animate上でプレビュー可能です。Webフォントは、その性質上、インターネットに繋がっている状態でないと利用できません。また、フォント情報を読み込むまでは反映されない点に注意しましょう。

任意のWebフォントサービスのフォントを利用する

[Edge Web Fonts]パネル内のWebフォントではなく、任意のWebフォントサービスのフォントを利用したい場合には、カスタムフォントとして登録・利用することも可能です。カスタムフォントとして登録する手順は以下の通りです。

  1. [カスタム]タブを選択し、[フォント代替リスト]欄にフォント名を入力します。
  2. [埋め込みコード]欄に、フォントを利用する際に必要なタグを入力します(タグの内容は、各Webフォントサービスベンダーによって異なります)。
  3. [フォントを追加]ボタンを押すと、カスタムフォントが[ライブラリ]の[フォント]欄に追加され、利用可能となります。

カスタムフォントを利用した場合、Edge Animate内のステージにはWebフォントが反映されない場合があります。このような場合では、プレビューやパブリッシュを行いブラウザー上で確認すると反映されます。

登録したWebフォントの削除や、カスタムフォントの削除/内容の変更は、[ライブラリ]パネル内の[フォント]欄から該当フォントを選択して、[Delete]で削除、ダブルクリックで編集を行うことができます。