フォントの選択

テキストツールのフォント選択ツールを使用すると、一般的なフォントのリストから選択できます。また、Google Fonts の中から利用できるウェブフォントを追加することもできます。

1. ツールバーのテキストツール を選択するか、テキストパネルを開きます。
2. ツール オプションバーまたはテキストパネルのいずれかでフォント名をクリックします。フォント メニューが開きます。

   

3. フォントを選択します。

最初にフォントを選択した上でテキストを追加することも、既存のテキストを選択して目的のフォントに変更することもできます。

Google Fonts からのフォントの追加

Google Web Designer に組み込まれている一般的なフォントに加え、Google Fonts を通じて利用できる数百の無料オープンソース フォントも使用できます。

Google Fonts のカタログからフォントを追加するには:

1. ツールバーのテキストツール を選択するか、テキストパネルを開きます。
2. ツール オプションバーまたはテキストパネルのいずれかでフォント名をクリックします。フォント メニューが開きます。
3. フォント メニューの下部にある [その他のフォント…] をクリックします。Google Fonts カタログの読み込みが開始されます。フォントをさらに読み込むには、リストの一番下までスクロールします。
4. 検索フィールド にフォント名を入力して Enter キーを押すか、フィルタを使用してオプションを絞り込むことで、検索します。
5. 使用するフォントを選択します。右側の [追加したフォント] リストに表示されます。

   

6. 選択内容を確認したら、[OK] をクリックします。追加したフォントがドキュメントのフォント メニューに表示されます。

他のフォントの使用

現時点でフォントのプルダウンに追加できるのは Google Fonts のフォントのみですが、フォント ファイルがある場合はカスタム フォントを使用できます。

1. パソコンのファイル システムでプロジェクトの assets サブフォルダにフォント ファイルを追加します。
   • Studio を使用している場合は、カスタム フォントを Studio アセット ライブラリにアップロードできます。
   • ブラウザの互換性を高めるには、複数のフォント形式を含めます。
2. コードビューに移動し、フォントの詳細を使用して、終了タグ の前に次の CSS を追加します。

   @font-face {
     font-family: "My Font Name";
     src: url("assets/myfontname.ttf") format("truetype");
   }

3. フォントを使用するには、[フォント名] にフォントの名前（font-family 行に入力したとおり）を入力します。