Edge Animateプチリファレンス 第3回：Webフォントを利用しよう

Edge Animate CC（以下、Edge Animate）では、テキストのフォントとして、Webフォントを簡単に利用できる仕組みが用意されています。本記事では、Webフォントの使い方を紹介します。Edge Animateの基本操作については、Edge Animate入門をご覧ください。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

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系フォント sans-serif系フォント script系フォント blackletter系フォント monospace系フォント hand系フォント decolation系フォント

下図は、Webフォントを適用したところです（サンプル：sample.an）。

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

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

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

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

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

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