フォントの設定・置換・削除

Studioでは、全てのプランで追加料金なく豊富なフォントが利用できます。この記事では、テキストボックスにフォントを設定する手順と、設定済みフォントを置換・削除する手順について説明します。

サイト内で使用するフォント管理については、フォントの管理方法をご覧ください。

ℹ️FONTPLUS提供終了における、フォントの置き換えについて

Studioで提供している「FONTPLUS」フォントは、提供元であるMonotype社との契約終了に伴い、2026年4月7日をもって提供を終了します。

本件の詳細やフォントの置き換え方法については、以下の専用ヘルプページにてご案内しております。

フォントリストにフォントを追加する

テキストにフォントを設定するには、使用するフォントをフォントリストへ追加する必要があります。

フォントリストに登録されたフォントは「フォントファミリー」として、ベースの書体（フォント）の補助をするサブフォントを追加したり、名称ラベルを付与してサイト内の管理に活用できます。

フォントはテキストボックスごとに設定します。ブレイクポイントごとに異なるフォントを指定して、PCとスマートフォンで表示を変えることも可能です。

Tips：デフォルトフォント

新しく追加したテキストボックスには、フォントリストで設定済みのデフォルトフォントが自動で適用されます。

デフォルトフォントが未設定の場合は、「Lato」が最初のデフォルトフォントとして使用されます。

テキストボックスを選択します。
右パネルで、[テキスト]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
[タイポグラフィ]で[フォント]入力欄をクリックします。
[フォントファミリー]リストから、追加済みのフォントファミリーを選択するか、[フォントを追加]をクリックして新しいフォントファミリーを追加し、そのまま適用します。

新規のフォントファミリーを追加する場合の手順を説明します。

フォントファミリーリスト下部の[フォントを追加]をクリックします。
クリックすると、Studioで利用できるフォント群（Google FontsやTypeSquareなどのWebフォント、システムフォント、カスタムフォント）とそのフォント群に所属するフォントがリストで表示されます。
フォントをクリックすると、選択したフォントが即時フォントリストに追加され、テキストボックスに適用されます。
公開中のサイトへ変更を反映させるには、サイトの更新が必要です。

フォントリストに追加したフォントには、補助的な表示で使用できるサブフォントを設定できます。サブフォントを使うと、言語別のフォント指定やシステムフォント利用時にデバイスごとの表示フォントの指定が可能です。

テキストボックスを選択します。
右パネルで、[テキスト]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
[タイポグラフィ]で[フォント]入力欄をクリックします。
[フォントファミリー]リストから、サブフォントを追加したいフォント名称横のアイコンをクリックします。
[サブフォントを追加]ボタンをクリックします。
Studioで利用できるフォント群（Google FontsやTypeSquareなどのWebフォント、システムフォント、カスタムフォント）とそのフォント群に所属するフォントがリストで表示されるので、サブフォントとして登録したいフォントを選択します。

フォントファミリーのベースの書体（フォント）やサブフォントを他のフォントに変更できます。変更と同時に、フォントファミリーを使用しているすべての使用箇所のフォントが置き換わります。

テキストボックスを選択します。
右パネルで、[テキスト]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
[タイポグラフィ]で[フォント]入力欄をクリックします。
フォント名横のアイコンをクリックします。
[フォント設定]パネル右上の3点メニューをクリックします。
フォントを使用しているページがある場合は、[フォントを置き換えて削除]と表示され、モーダルが表示されます。
置き換え先のフォントファミリーを選択して[フォントを削除]ボタンをクリックします。