フォントの選択

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

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

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

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

Google 広告と Google AdMob でサポートされているのは、Google ウェブフォントのみです。

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

パソコンのファイルシステムでプロジェクトの assets サブフォルダにフォントファイルを追加します。
- Studio を使用している場合は、カスタムフォントを Studio アセットライブラリにアップロードできます。
- ブラウザの互換性を高めるには、複数のフォント形式を含めます。
コードビューに移動し、フォントの詳細を使用して、終了タグの前に次の CSS を追加します。
```
@font-face {
  font-family: "My Font Name";
  src: url("assets/myfontname.ttf") format("truetype");
}
```
フォントを使用するには、[フォント名] にフォントの名前（font-family 行に入力したとおり）を入力します。

CSS スタイルルールでカスタムフォントを使用する場合は、代わりのウェブセーフフォントを少なくとも 1 つリストに追加してください。

たとえば日本語のドキュメントの場合は、次のリストを使用できます。
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","MS PGothic",Verdana,Helvetica,sans-serif;

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。