3-1 Edge Web Fontsを使ってみよう

---

前回までに作成したコンテンツのテキスト部分に対して、Edge Web Fontsを適用することで、
もっと見栄えよく変更していきましょう。

Edge Web Fontsとは

Adobe Edge Web FontsのWebサイトへ

Edge Web Fontsの適用は非常に簡単です。
さて、さっそく変更を加えていきましょう。

タイトルテキスト

１.タイトルテキストを選択します。

２.EdgeAnimationで使用できるフォントを追加し適用します。

・プロパティパネルの「テキスト」でフォントのプルダウンの横の「Webフォントを追加」を選択します。

・Edge Web Fontsパネルが開くのを確認します。

・見出し用のアイコンを選択します。
・見出しに向いたテキストフォントの絞り込みができます。

・タイトルテキストフォントを選びます。
・今回はPoiret Oneを選択します。

・パネルの右下の「フォントを追加」をクリックします。

・適用を行うと、ライブラリパネルのフォント一覧にも追加されるので確認しましょう。

Informationテキスト1にフォントを設定します。

・フォントを検索して適用する方法で操作してみましょう。

１.Informationテキスト1を選択します。

２.EdgeAnimationで使用できるフォントを追加し適用します。

・Edge Web Fontsパネル内の検索バーを使用して、フォントを検索し、追加します。
・Informationテキストフォント1　Josefin Sans

Informationテキスト2にフォントを設定します。

・検索して追加したフォントを適用する方法で操作してみましょう。

１.Informationテキスト2を選択します。

２.フォントを適用します。

・プロパティパネルの「テキスト」でフォントのプルダウンを開きます。
・Informationテキストフォント2　Josefin Sans を選択します。

ボタンテキストにフォントを設定します。

１.ボタンテキスト1、2を選択します。

・ボタンテキスト1を選択したあと、ボタンテキスト2をshiftキーを押しながらクリックするとまとめて選択できます。

２.EdgeAnimationで使用できるフォントを追加し適用します。

・Edge Web Fontsパネル内の検索バーを使用して、フォントを検索する
・Informationテキストフォント　Nova Square

ここで、ファイルを保存します。
次に、作成したコンテンツをブラウザで見てみましょう。

ブラウザでプレビュー

１.「ファイル」から「ブラウザでプレビュー」を選択します。

きちんと表示されましたでしょうか。

このように、Webフォントを簡単に利用することができます。
これが、EdgeAnimateの特徴です。

次回からはいよいよアニメーションに入ります。
まずは簡単なところから順を追って説明していきます。

＜前のトピックへ　||　次のトピックへ＞

---