【カスタマイザー】フォントの設定

カスタマイザーの「フォント」セクション

BONTAには、サイト全体(見出し・本文・ボタン等)で使うフォントを1つ選べる「フォント」セクションが用意されています。ここでは設定内容と、選択肢ごとの挙動を紹介します。

BONTAのフォント設定でできること(サイト全体で1つを選択)

「外観」>「カスタマイズ」の「フォント」セクションから、サイト全体で使うフォントをラジオボタンで1つ選択できます。「OS標準フォント」以外を選ぶと、選んだフォント1つだけをGoogle Fonts CDNから読み込みます。接続できない場合は自動的に閲覧者の端末の既定フォントで表示されるため、表示崩れの心配はありません。

カスタマイザーの「フォント」セクション

設定方法(3ステップで完了)

設定は3ステップで完了します。

1

「外観」>「カスタマイズ」を開く

2

「フォント」セクションを開き、使いたいフォントを選択する

選択肢は6種類あります(詳しくは後述します)。

3

内容を確認して「公開」を押す

プレビュー中はまだ本番に反映されません。「公開」ボタンを押すまで確定しない点に注意してください。

選べる6種類のフォント(OS標準・明朝体3種・ゴシック体2種)

「フォント」セクションには6つの選択肢があります。それぞれの特徴は次のとおりです。

01

OS標準フォント(既定)

Windows: 游ゴシック、Mac: ヒラギノ角ゴ 等。閲覧者の端末が既定で使っているフォントがそのまま表示されます。外部への接続は一切発生しません。

02

Noto Serif JP(明朝体)

Google Fonts CDNから読み込む明朝体フォントです。

03

Zen Old Mincho(明朝体)

Google Fonts CDNから読み込む明朝体フォントです。

04

Zen Kaku Gothic New(ゴシック体)

Google Fonts CDNから読み込むゴシック体フォントです。

05

M PLUS 1(ゴシック体)

Google Fonts CDNから読み込むゴシック体フォントです。

06

BIZ UDPMincho(明朝体・UD)

Google Fonts CDNから読み込む、ユニバーサルデザインに配慮した明朝体フォントです。

💡 ポイント

「OS標準フォント」以外を選んだ場合も、選んだフォント1つだけがリクエストされ、他の候補フォントは読み込まれません。CDNの読み込みが完了するまでは閲覧者の端末の既定フォントで表示され、読み込みが完了すると自動的に切り替わります(display=swap)。接続できない場合も端末の既定フォントで表示され続けるだけなので、画面が真っ白になったり読み込みが止まったままになることはありません。

フォント設定運用時の注意点(フォント統一・CDN読み込み条件)

  • サイト全体の見出し・本文・ボタン等は、すべて1つの共通フォント設定を参照しているため、複数フォントが混在することはありません。
  • 「OS標準フォント」以外を選んだときだけ、選んだフォント1つのみがGoogle Fonts CDNから読み込まれます。
  • CDNに接続できない場合は、閲覧者の端末の既定フォントで表示されるだけで、表示が崩れることはありません。
  • 「OS標準フォント」を選んでいる限り、外部への接続は一切発生しません。

フォント設定に関するよくある質問

Q

フォントを変更すると、見出し・本文・ボタンなど全部に反映されますか?

A

はい。サイト全体が1つの共通フォント設定を参照しているため、変更すると見出し・本文・ボタンなど全ての要素に一括で反映されます。

Q

「OS標準フォント」を選ぶと必ず游ゴシックやヒラギノ角ゴになりますか?

A

いいえ。選択肢名にある「Windows: 游ゴシック、Mac: ヒラギノ角ゴ 等」はあくまで典型例です。実際には閲覧者の端末が既定で使っているフォントがそのまま表示されるため、環境によって表示されるフォントは異なります。

Q

Google Fonts CDNに接続できない環境ではどうなりますか?

A

自動的に閲覧者の端末の既定フォントで表示されます。画面が真っ白になったり、読み込みが止まったままになることはありません。

Q

選んでいないフォントも読み込まれますか?

A

いいえ。選択した1つのフォントのみがリクエストされ、他の候補フォントは一切読み込まれません。

まずは無料相談から

現状の課題を把握し、最適な施策を提案します。
お気軽にご相談ください。