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

Studioでは、全てのプランで追加料金なく豊富なフォントが利用できます。フォントは、ウェブサイトの印象を視覚的に伝えるだけでなく、文章を読みやすくし、内容を分かりやすく伝えるための役割を果たします。

この記事では、テキストへのフォント設定・一括置換・削除方法について解説します。フォント管理については、フォントの管理方法をご覧ください。

フォントリストへのフォント追加方法

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

フォントリストは、プロジェクトで使用するすべてのフォントを一元管理する場所です。サブフォントの追加やラベルの編集などができます。

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

テキストボックスを選択します。
スタイルバーの[テキスト]タブを開きます。
[フォントを追加]をクリックして、任意のフォントを選択します。
フォントサービスを選び、フォント名で検索するかスタイルや言語で絞り込みます。フォントをクリックすると自動的にフォントリストへ追加されます。

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

フォントリストへ追加済みのフォントにサブフォントが追加できます。

サブフォントを使うと、言語別のフォント指定やシステムフォント利用時にデバイスごとの表示フォントを指定することができます。

注意：サブフォントを追加した場合、追加済みのフォントごとに太さ（フォントウェイト）を指定することはできません。全て同じ太さとなります。

フォントはテキストボックスごとに設定できます。また、ブレイクポイントごとに別々のフォントを設定できるため、PCやスマホで異なる表示が可能です。

フォントを適用したいテキストボックスをクリックします。
スタイルバーの[テキスト]タブを開き、フォントリストからフォント選択します。選択後、エディタやプレビュー上ですぐに設定の反映が確認できます。公開中のサイトへ変更を反映させるには、サイトの更新が必要です。

設定中のフォントやサブフォントを、後から別のフォントに一括置換できます。

設定済みのフォントを後から変更したい場合や、テンプレートを利用する際のフォント変更時に便利な機能です。

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