メインコンテンツにスキップ

フォント選びと使い分けのヒント:システムフォント(System Font)とWebフォント

StudioでWebサイトを作成する際のフォントの選び方を、システムフォント(System Font)とWebフォントの観点から説明します。

今週アップデートされました

ℹ️ 【重要】FONTPLUSの提供終了について

Studioで提供しているWebフォント「FONTPLUS」は、2026年4月7日(火)をもって提供を終了します。

2026年4月8日以降、Studio上で設定されているFONTPLUSフォントは、適宜システムフォントなどに置き換わります。デザインに影響が生じる可能性があるため、必要に応じてフォントの差し替え対応をお願いいたします。

■ 提供終了フォント:

■ フォントの置換方法

以下、いずれかの方法で置き換え対応をお願いいたします。置き換え時の参考として、代替フォントリストを公開しています。

  1. フォントの設定・置換・削除を参考に手動で置き換える

  2. フォント一括置換機能を使用して置き換える


本件に関する詳細は、下記のお知らせをご参照ください。

ご不明点がございましたら、エディタ左下[?]ボタンのチャットサポート窓口にて、[FONTPLUS提供終了について]を選択してください。

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

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


システムフォントとは

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

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

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

ℹ️ 2025年11月25日にリリースした「Editor 5.0」では、メニュー配置や操作手順が異なる場合があります。

スクリーンショット:システムフォントの設定画面。

Tips:システムフォントの表示ブレ

システムフォントを使用した場合、すべての閲覧環境で同じフォントを表示させることはできません。

サブフォントを指定することで意図しない表示やフォント起因のデザイン崩れの可能性を減らすことが出来ます。

システムフォントの特徴

  • Webフォントと比べて表示速度が速い

  • 閲覧環境によって異なるフォントで表示される可能性がある

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

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

  • コーポレートサイトやECサイト

  • テキスト主体のコンテンツサイト


Webフォントとは

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

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

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

スクリーンショット:Webフォントの設定画面。

Webフォントの特徴

  • すべての閲覧環境で統一した表示が可能

  • システムフォントと比べ、フォントの選択肢が多い

  • フォント自体の容量が表示速度に影響する場合がある

Webフォントの推奨用途

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

  • ブランドイメージを重視するサイト

  • デザイン性の高いランディングページ

システムフォントとWebフォントの比較表

特徴

システムフォント

Webフォント

読み込み速度

速い

遅い場合がある

フォントの表示

閲覧環境で異なる場合がある

閲覧環境で変わらない

推奨用途

表示速度を重視

サイトデザイン重視

関連記事

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