メインコンテンツにスキップ
フォントの設定と管理

Studioでは、Google Fonts と TypeSquare(モリサワ)が無料で利用できます。プロジェクトへのフォント追加・設定方法をご紹介します。

Saika avatar
対応者:Saika
今週アップデートされました

Studioでフォントを管理・適用する

Studioでは全プランでFONTPLUSGoogle FontsTypeSquare(モリサワ)が提供する一部フォントが利用できます。

利用可能なフォントは、エディタのフォント追加画面よりご確認ください。 FONTPLUSは、書体提供企業ごとにまとめた以下リストでもご確認いただけます。

注意

  • フォントのアップロードやインポートには対応していません。Studio上で提供するフォントをご利用ください。

  • FONTPLUSは、1プロジェクトにつき最大50フォントファミリーの追加ができます。

フォントリストとは

フォントリストはプロジェクト内で使用するフォントを管理するためのリストで、エディタ左側のスタイルパネル内に格納されています。

リスト内のフォントはドラッグで並べ替えができ、リストの1番上にあるフォントがプロジェクト内でのデフォルトフォントとなります。新しくテキスト・リッチテキストボックスをページに配置すると、このデフォルトフォントが自動的に適用されます。

スクリーンショット:フォントリストを表示する様子。

フォントの追加

フォントをテキストに適用するには、まずフォントリストへ追加します。

1. フォントリスト右上の「+」をクリック

スクリーンショット:フォントリストにフォントを追加する様子。

2. フォントの選択

フォントサービスを選び、フォント名で検索するかスタイルや言語で絞り込みます。フォントをクリックすると自動的にフォントリストへ追加されます。

フォントサービスによって絞り込み条件は異なりますが、スタイルは複数選択、言語は単一選択できます。

スクリーンショット:フォントを選択する様子。

フォントの適用

テキストボックスを選択した状態で、画面上部のテキストタブ > フォントから任意のフォントを選びます。

スクリーンショット:フォントリストを適用する様子。

フォントの置換

適用中のフォントおよびサブフォントは、後から別のフォントへ一括置換できます。

1. フォント詳細を開く

フォントリストからフォントを選択し、詳細を開きます。

2. 置き換えフォントの選択

ホバーすると表示される置き換えアイコンをクリックし、置き換えたいフォントを選択します。選択後、すぐにフォントが自動的に置き換えられます。公開中のサイトへ変更を反映させるには、サイトの更新が必要です。

スクリーンショット:フォントを置き換える様子。

ラベルの変更

プロジェクト内での管理に便利なラベルは、フォント詳細画面で編集します。「見出し1」「本文」のような名称は管理がしやすくおすすめです。

使用箇所の確認

フォントリスト内のフォントにホバーすると、使用箇所がハイライト表示されます。

スクリーンショット:フォントの適用箇所を確認する様子。

さらにフォント詳細の使用状況から、ページごとの使用数が確認できます。クリックすると、そのページへ移動します。

スクリーンショット:フォントの使用状況を確認する様子。

フォントの削除

フォントリストからフォントをクリックし、詳細ページを開きます。パネル右上の3点メニューからフォントが削除できます。

スクリーンショット:フォントを削除する様子。

もし、そのフォントを使用しているページがある場合は、「フォントを置き換えて削除」と表示されます。置き換え先のフォントを選んで、フォントを削除します。

スクリーンショット:フォントを置き換えて削除する様子。

サブフォントの追加

フォントにはサブフォントが追加できます。フォント詳細を開き「サブフォントを追加」から任意のフォントを追加します。

スクリーンショット:サブフォントを追加する様子。

サブフォントはドラッグで並び替えができ、この中で上にあるものから順番に適用されます。 例えば次の順番でフォントを追加し並べた場合、

  1. かなフォント

  2. 英語フォント

  3. 日本語フォント

ひらがな・句読点などは(1)、半角英数字は(2)、それ以外の漢字・全角記号は(3)のフォントが反映されます。つまりサブフォントを使えば、和欧混植の「複合フォント」を実現できます。

スクリーンショット:和文と欧文の複合フォントの例。

フリーフォント

こちらの回答で解決しましたか?