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

エディタで設定したフォントが、異なるフォントとして表示される場合

Studioのエディタで指定したフォントと、PCやスマートフォンなど閲覧環境で表示されるフォントが異なる場合の主な原因と、システムフォント設定の確認方法および対処方法を説明します。

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

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

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

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

■ 提供終了フォント:

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

  • 置換の参考として、代替フォントリストをご用意しています。

  • エディタ上でのフォント一括置換機能の提供を予定しています。(3月24日予定)


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

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


表示されるフォントが異なる一因

エディタで設定したフォントと異なるフォントがPCやスマホなどで表示される場合、テキストにシステムフォント(System Fonts)が設定されている可能性があります。

この記事では、フォントの設定状況確認から対処方法までをご紹介します。

手順 1. フォント設定状況の確認

手順 2. 原因ごとの対処方法

Tips:システムフォント(System Fonts)とは

システムフォント(System Fonts)は、Studioで設定できるフォントの種類の1つで、MacやWindows、iOSなどのデバイスにあらかじめインストールされているフォントです。​
システムフォントを設定すると、閲覧しているデバイスやブラウザにそのフォントがインストールされている場合は指定通りに表示されますが、存在しない場合は利用可能な別のフォントに自動で切り替わります。​

閲覧環境(Mac、Windows、iOSなど)によって、エディタで指定したフォントとは異なるフォントが表示されることがありますが、サブフォント設定などを活用することで、表示フォントをある程度コントロールできます。


手順 1. フォント設定状況の確認

問題のテキストにシステムフォントが設定されているか、次の手順で確認します。

  1. 右パネルで、[テキスト]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。

  2. [タイポグラフィ]で[フォント]入力欄をクリックします。

  3. [フォントファミリー]リストから、サブフォントを追加したいフォント名称横のアイコンをクリックします。

  4. [フォント]入力欄に表示されているフォント名をコピーします。

  5. [フォント設定]左の[<]をクリックし、[フォントファミリー]リストに戻り、[フォントを追加]ボタンをクリックします。

  6. フォント群(デフォルトではGoogle Fontsが表示されています。)のプルダウンリストをクリックして、[System Fonts]を選択します。

  7. [フォント名で検索]に、手順5でコピーしたフォント名をペーストして検索します。

  8. 検索結果に同じフォント名が表示されれば、問題のテキストにシステムフォントが設定されています。


手順 2. 原因ごとの対処方法

問題のテキストにシステムフォントが設定されている場合は、 1. システムフォントが原因である場合の対処方法を、そうでない場合は 2. システムフォントが原因でない場合の対処方法をご覧ください。

1. システムフォントが原因である場合の対処方法

問題のテキストにシステムフォントが設定されている場合の対処方法は、下記の通りです。

1. Windows用、Mac用など閲覧環境(OS・ブラウザ)ごとにサブフォントを設定する

システムフォントを利用する場合でも、デバイスごとに最適なフォントを代替え(サブフォント)として指定することで表示をコントロールすることができます。

設定方法は下記記事をご覧ください:

2. Webフォントの設定へ切り替える

Webフォントを設定すると、どの閲覧環境でも同じフォントが表示されます。システムフォントから、別のWebフォントへ置換してください。

Webフォントは下記サービスから選択できます:

注意:Webフォントに切り替えると、フォントの読み込みが発生します。

サイトの表示速度に影響を与える可能性があるため、システムフォントとWebフォントの違いをあらかじめ把握した上で切り替えを行ってください。

違いの詳細は、フォント選びと使い分けのヒント:システムフォント(System Fonts)とWebフォントをご覧ください。

2. システムフォントが原因でない場合の対処方法

プロジェクトの詳しい設定状況をご確認いたします。エディタ右下の[?]からチャットサポートへお問い合わせください。

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