フォント選びと使い分けのヒント

Studioでは、システムフォント（System Font）とWebフォントを利用できます。それぞれの特徴を理解し、適切に使い分けることで、効果的なWebサイトの作成・運用が可能です。

実際にご利用いただけるフォントの種類は、エディタのフォント追加画面よりご確認ください。

システムフォントとWebフォントについて、それぞれの特徴や用途について説明します。

システムフォントは、パソコンやスマートフォンなどのデバイスにあらかじめ搭載されているフォントです。デバイスに標準で備わっているため、デバイスフォントとも呼ばれます。

システムフォントを指定すると、閲覧環境に指定したシステムフォントがインストールされていれば指定通りに表示され、ない場合は閲覧環境で標準指定されているフォントで表示されます。読み込み時にダウンロードが不要なため、Webフォントに比べて素早く表示できますが、閲覧環境によっては意図したデザインとは異なる表示がされる場合があります。

デザインエディタのフォント選択箇所の「System Font」から設定ができます。

システムフォントの特徴

システムフォントの推奨用途

表示速度を重視するサイトに適しています。

Webフォントは、クラウドやサーバーからフォントをダウンロードして利用するため、全ての閲覧環境で同じフォントを表示します。また、豊富なフォントからデザイン性の高いフォントを選択することができます。一方で、サイト閲覧時にフォントの読み込みが必要なため、選択したフォントによっては表示速度に影響が出る場合があります。

Studioでは全プランで以下のサービスが提供するフォントを利用できます。

デザインエディタでは、提供サービスごとに利用できるフォントがリストされています。

Webフォントの特徴

Webフォントの推奨用途

サイトデザインを重視する場合に適しています。