マニュアルキャンセル

HTML5 Canvas ドキュメントでの Google フォントの使用

検索

最終更新日 : 2023年5月24日

デスクトップフォントを使用して Web 出力を作成し、パブリッシュした場合、再生時に最適な結果が得られないことがあります。Animate には、あらゆるフォームファクターに一貫した字体を提供する Google フォントが導入されています。Google フォントは、Google のサーバーから提供される無料のオープンソースフォントです。Google フォントおよびオリジナルフォントのデザイナーについて詳しくは、https://fonts.google.com/about および https://fonts.google.com/attribution を参照してください。

Google フォントを使用するメリット：

キャッシュ：初回ダウンロード後、フォントはローカルシステムに保存されるので、繰り返しダウンロードする必要がありません。そのため、テキストを高速にロードできます。
オープンソース：無料で使用でき、要件に基づいて再配布または変更できます。
互換性：広告や Web コンテンツでシームレスに機能します。
レスポンシブ：あらゆるフォームファクターにレスポンシブなコンテンツエクスペリエンスを提供し、一貫した見やすい表示を維持します。

HTML5 Canvas ドキュメントを開き、ツールパネルでテキストツールを選択します。
プロパティパネルで、「ダイナミックテキスト」を選択します。
「Web フォントを追加」アイコンをクリックして、「Google Fonts」を選択します。

Google フォントダイアログボックスを選択
Google フォントダイアログボックスには、利用可能なすべての Web フォントが一覧表示されます。様々なフォントをざっと閲覧したり、特定のフォントを検索したり、フォントの属性でフィルタリングしたりして、デザイン上のニーズに最も適したフォントを選択できます。
- 検索：名前でフォントを検索します。
- カテゴリ：利用可能なカテゴリに基づいてフォントをフィルターします。
- 並べ替え：以下のカテゴリに基づいてフォントを並べ替えます。
  
  人気：フォントの人気に基づいて並べ替えます。
  
  アルファベット：フォントをアルファベット順に並べ替えます。
  
  追加日：フォントがドキュメントに追加された日付に基づいて並べ替えます。
  
  スタイル数：各フォントファミリで利用できるスタイル数に基づいて並べ替えます。
  
  トレンド：フォントカテゴリのトレンドに基づいて並べ替えます。
- ヘルプ：Google フォントのオンラインヘルプを表示します。
- キャンセル：フォントの選択をキャンセルします。
- 完了：選択したフォントをドキュメントに追加します。
Google フォントダイアログボックス
ドキュメントにフォントを追加するには、使用するフォントをクリックして、「完了」を選択します。チェックマークが表示されている場合は、そのフォントが選択されていることを示します。

複数のフォントを選択して追加することもできます。
Animate で追加されたフォントを表示するには、プロパティインスペクターで文字／フォントファミリーを選択します。

プロパティインスペクターで選択された Google フォント
文字／フォントファミリーのドロップダウンリストで、HTML5 Canvas ドキュメントで使用する Google フォントを選択します。

選択したフォントをドキュメントで使用