作成日
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］で削除、ダブルクリックで編集を行うことができます。