フォントの管理

Studioでは、サイト内のテキストに様々なフォントが設定できます。フォントは、サイトの印象を視覚的に演出するだけでなく、コンテンツの可読性を高める重要な要素の一つです。本記事では、フォントを管理する機能をご紹介します。

フォントの設定方法については、フォントの設定・置換・削除方法をご覧ください。

フォントリストは、プロジェクトで使用するフォントを一元管理する場所です。フォントをテキストに適用するには、まずフォントをリストへ登録する必要があります。

他にも、フォントリストでは以下の設定ができます：

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

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

サブフォントを追加して和欧混植の「複合フォント」が設定できます。

設定するフォントによりますが、例えば次の順番でフォントを追加し並べた場合、ひらがな・句読点などは（1）、半角英数字は（2）、それ以外の漢字・全角記号は（3）のフォントが反映されます。

システムフォント（System Fonts）とは、各デバイス（Mac、Windows、iOSなど）にあらかじめ搭載されているフォントを指します。

単一のシステムフォントを設定した場合、閲覧環境にそのフォントが存在しないと、閲覧環境のOS・ブラウザに搭載されている別のフォントが自動的に適用されてしまいます。

この結果、デバイスごとに指定していないフォントが表示され、Webサイトの視覚的な一貫性が損なわれる可能性があります。

ただし、デバイスごとに最適なフォントを代替え（サブフォント）として指定することで表示フォントをコントロールし、このような状況を避けることができます。

システムフォントはデバイスによって異なります。下記公式情報などを参考に指定するフォントをご検討ください。

デフォルトフォントとは、プロジェクト内でテキストを追加した際に自動的に適用されるフォントのことを指します。あらかじめ指定しておくことで、都度変更する手間が省けます。

フォントリストの1番上にあるフォントが、デフォルトフォントとなります。空白でプロジェクトを作成した場合は、「Lato」がデフォルトフォントとして設定されています。

リスト内のフォントを並び替えてデフォルトフォントを変更します。

フォントリストに追加済みのフォントは、管理用のラベル変更ができます。「見出し１」「本文」などの名称にするとプロジェクト内で管理しやすくなります。

フォントが使用されているページをエディタ上で簡単に確認することができます。