WEBフォントをかしこく使う：Googleフォント＋システムフォントの合わせ技

2026年5月5日 最終更新日時 : 2026年5月6日 BiNDism

FONTPLUSのサービス終了後もサイトを美しく保つために。読み込み速度を犠牲にせず、日本語を美しく表示するCSSの設計思想を解説します。

BiNDupに統合されていた「FONTPLUS」によるWEBフォント提供が終了し、今後は Google Fonts をはじめとした外部フォントを自分で組み合わせる機会が増えてきます。でも「WEBフォントを設定すれば、それだけでサイトが美しくなる」と思っていませんか？

実は、使い方を間違えると 表示が遅くなる という大きな落とし穴があります。この記事では、WEBフォントのメリット・デメリットをきちんと理解したうえで、速度と美しさを両立させるCSSの書き方を紹介します。

そもそも「WEBフォント」とは何か？

WEBフォントとは、サイトを表示するときに インターネット上のサーバーからフォントデータをダウンロード して使う仕組みです。訪問者のパソコンやスマートフォンにそのフォントがインストールされていなくても、指定したフォントで文字を表示できるのが最大の特徴です。

一方、「システムフォント」とは OSにあらかじめ内蔵されているフォント のことです。Macなら「ヒラギノ角ゴ」、Windowsなら「メイリオ」や「游ゴシック」、iOS・Androidにもそれぞれ標準フォントが搭載されています。ダウンロードが不要なため、表示が非常に速い というメリットがあります。

WEBフォントのメリット

  • デザインの統一感が出る
  • OS・端末に依存しない見た目を実現できる
  • デザイナーが意図した書体を確実に表示できる
  • 「Noto Sans JP」など高品質な日本語書体を利用できる

WEBフォントのデメリット

  • フォントデータの読み込みに時間がかかる
  • 複数のウェイト（太さ）を読み込むほど遅くなる
  • 特に日本語は文字数が多くデータ量が大きい
  • 通信が遅い環境では文字が遅れて表示される

特に注意： 日本語のWEBフォントは英語の数十倍以上のデータ量になることがあります。複数の日本語WEBフォントを同時に指定すると、ページの表示開始が数秒単位で遅くなることも。「美しさ」と「速さ」はトレードオフの関係にあることを必ず意識してください。

BiNDupのWEBフォント設定の限界

BiNDupのインターフェイスからGoogleフォントを指定することは可能ですが、現状の仕組みにはいくつかの制限があります。

BiNDup標準のWEBフォント指定でできないこと：

  • フォントの太さ（weight）を複数同時に指定すること（Regular・Boldを別々に読み込む設定ができない）
  • Variable Font（可変フォント）としての効率的な読み込み
  • system-ui や -apple-system などのシステムフォントとの組み合わせ指定
  • 読み込み最適化オプション（font-display: swap など）の細かな設定
  • 外部CSSファイルとして管理するフォント定義（@font-face）の作成

これらをすべて実現しようとすると、CSSファイルを別途作成し、各ページの <head> 内で読み込む という設定が必要になります。BiNDupには「リソースエディタ」という機能がありますが、CSSファイルをゼロから記述してサイトに組み込む作業は、初心者ユーザーにとってはかなりハードルが高いのが現実です。

そこで今回紹介するのが、「Googleフォント＋システムフォントの合わせ技」 です。少しの工夫で、読み込みを最小限に抑えながら、美しい日本語表示を実現できます。

フォントスタックという考え方

CSSの font-family プロパティには、フォントを 複数・優先順位をつけて 指定できます。先頭から順番に「このフォントが使えるか？」を確認し、使えなければ次のフォントにフォールバック（切り替え）します。この優先順位のリストを「フォントスタック」と呼びます。

指定役割読み込み
system-ui, -apple-system…英数字をOSのUIフォントで高速表示不要（最速）
"Noto Sans JP"日本語をGoogleフォントで美しく表示WEB取得
"Hiragino Sans"…WEBフォントが使えない場合のOS標準日本語フォールバック

このように設計することで、英数字はWEBフォントを一切使わず システムフォントで高速表示し、日本語だけ必要最低限のWEBフォントを使う、という効率的な構成が実現できます。

実践：CSSで実現するフォント設定の全体像

以下のCSSは、Google Fontsの「Noto Sans JP」を Regular（400）とBold（700）の2ウェイトだけ に絞って定義し、システムフォントと組み合わせたものです。local() を活用して「もしユーザーの端末にすでにNoto Sans JPが入っていたらダウンロード不要」にもなっています。

パート1：@font-face でフォントを定義する

まず、使いたいGoogleフォントを @font-face ルールで登録します。ここでのポイントは2つです。

  • local() を先に書く：端末にすでにフォントがあればダウンロードをスキップ
  • font-display: swap を設定：フォントが読み込まれる前にシステムフォントで表示し続け（FOUT）、読み込み完了後に切り替え。ページが真っ白になる時間（FOIT）を防ぐ
/* ============================================================
   1. フォントの定義（@font-face）
   Googleのサーバーから取得したURLとlocal()を組み合わせる
   ============================================================ */

/* Regular 400 */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans JP Regular'), 
       local('NotoSansJP-Regular'), 
       url('https://fonts.gstatic.com/s/notosansjp/v52/...(実際のURL)...') format('woff2');
}

/* Bold 700 */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans JP Bold'), 
       local('NotoSansJP-Bold'), 
       url('https://fonts.gstatic.com/s/notosansjp/v52/...(実際のURL)...') format('woff2');
}

実際のURLの調べ方：

  1. Google Fontsで「Noto Sans JP」を選択し、Regular・Boldを選ぶ
  2. 「Use on the web」の @import 用URLをブラウザのアドレスバーで直接開く
  3. 表示されたCSSに書かれているwoff2のURLと unicode-range をそのままコピーして貼り付ける

パート2：body にフォントスタックを適用する

定義したフォントを実際に使うための font-family 指定です。順番と意味を理解することがとても重要です。

/* ============================================================
   2. スタイルの適用
   ============================================================ */
body {
  font-family: 
    /* ① 英数字：OS標準（インストール不要で最速） */
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    /* ② 日本語：今回定義したNoto Sans JP（local優先） */
    "Noto Sans JP", 
    /* ③ 保険：OS標準のゴシック体 */
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", 
    sans-serif;

  font-weight: 400;
  -webkit-font-smoothing: antialiased; /* macOS/iOSでアンチエイリアスを有効化 */
}

h1, h2, h3 {
  font-weight: 700; /* 見出しはBoldウェイトを適用 */
}

① system-ui, -apple-system などの意味：

  • system-ui：ブラウザが「このOSのUI標準フォント」を自動選択
  • -apple-system：Safari向けのApple専用記述（SF Pro等を指定）
  • BlinkMacSystemFont：Chrome on Mac向けの記述
  • "Segoe UI"：Windows向け
  • Roboto：Android向け

これらは 英数字の表示に使われ、日本語には次の指定が使われます。英数字は各OSで最適化されたシステムフォントで高速表示されるため、WEBフォントのダウンロードがゼロになります。

BiNDupでこのCSSを使う手順

  1. Google FontsのCSSから実際のURLを取得する
    https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap をブラウザのアドレスバーに貼り付けて開き、表示されたCSSの中から url(…) をコピーします。
  2. BiNDupのリソースエディタでCSSファイルを新規作成する
    ファイル名は custom-fonts.css など分かりやすい名前に。上記のCSSコードを貼り付け、取得した実際のURLを対応する箇所に貼り替えます。
  3. 各ページの <head> 内でCSSを読み込む設定をする
    BiNDupのページ設定から「head内HTML」に以下を追記します。
    <link rel="stylesheet" href="custom-fonts.css">
  4. BiNDupのWEBフォント設定を「なし」にする
    BiNDupのインターフェイスから別途Googleフォントを指定していると二重読み込みになります。CSSで管理する場合は、インターフェイス側の設定は「なし」または空にしておきましょう。

「日本語WEBフォントを複数使う」は要注意

BiNDupのWEBフォント設定では、ページ内のパーツごとに異なるフォントを指定できます。しかし初心者が陥りがちなのが、複数の日本語WEBフォントを同時に指定してしまう ことです。

やってはいけない例：

  • 見出しに「Noto Serif JP（400/700）」→ ダウンロード：大
  • 本文に「Noto Sans JP（400/700）」→ ダウンロード：大
  • キャプションに「M PLUS 1p（400）」→ ダウンロード：中
  • 合計で何百KB〜数MBものフォントデータを読み込む羽目に…

基本ルール： 日本語WEBフォントはサイト全体で 1書体・2ウェイト（Regular＋Bold）まで を目安にしましょう。それ以上はパフォーマンスへの影響が大きくなります。タイトルだけ特別にしたい場合は、英語フォント（データが小さい）を使うのが賢い選択です。

まとめ：速さと美しさを両立するフォント戦略

今回紹介したアプローチのポイントは3つです。

① 英数字にはシステムフォントを使う
system-ui から始まるスタックで、端末ごとに最適なフォントが自動選択され、ダウンロードゼロで高速表示されます。

② 日本語WEBフォントは1書体・2ウェイトに絞る
Noto Sans JPのRegular（400）とBold（700）だけ読み込み、それ以外はシステムフォントに任せます。

③ font-display: swap と local() で最適化
読み込み中もシステムフォントで表示し続け、すでにフォントが端末にある場合はダウンロード自体をスキップします。

FONTPLUSのサービス終了は、フォント設定を見直す良いきっかけでもあります。「美しさ」だけでなく「速さ」も意識したフォント設計で、訪問者にとって快適なサイトを作りましょう。

カテゴリー
BiNDup、Google
タグ
前の記事
AI時代の検索で「選ばれる写真館」になるために
2026年1月7日