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

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

Saika avatar
対応者:Saika
2週間以上前に更新

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

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

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

注意

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

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

フォントリストとは

フォントリストはプロジェクト内で使用するフォントを管理するためのリストで、スタイルバーのテキストタブに格納されています。

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

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

フォントの追加方法

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

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

  2. スタイルバーのテキストタブを開きます。

  3. [フォントを追加]をクリックして、任意のフォントを選択します。

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

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

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

フォントの適用方法

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

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

フォントの置換方法

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

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

  2. スタイルバーのテキストタブを開きます。

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

  4. ホバーすると表示される置き換えアイコンをクリックし、置き換えたいフォントを選択します。

選択後、すぐにフォントが自動的に置き換えられます。公開中のサイトへ変更を反映させるには、サイトの更新が必要です。

ラベルの変更方法

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

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

  2. スタイルバーのテキストタブを開きます。

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

  4. ラベルを編集します。

使用ページの確認方法

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

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

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

フォントの削除方法

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

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

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

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

サブフォントの追加方法

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

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

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

  1. かなフォント

  2. 英語フォント

  3. 日本語フォント

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

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

フリーフォント

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