フォントサイズビューワーとは
フォントサイズビューワーは、PC内にインストールされたフォントを一覧でプレビュー比較し、サイズ・字送り（letter-spacing）・行間（line-height）をリアルタイム調整できる無料のオンラインツールです。Webデザイン・LP制作・印刷・スライド資料など、書体選定が必要なあらゆるシーンで、最適なフォントとCSS設定を素早く見つけるのに役立ちます。
基本ステップ
- プレビューテキストを入力：和文・欧文それぞれ独立した入力欄に、実際に使う文章を設定。書体ごとの質感が掴みやすくなります。
- サイズ・字送り・行間を調整：スライダーまたは数値入力で全フォント同時に変更。タイポグラフィの最適値を探れます。
- PC内フォントを読み込み：「PC内フォントを読み込む」ボタンを押してブラウザに許可を出すと、PCの全フォントが一覧表示されます（Chrome/Edge 103+）。
- フィルタで絞り込み：スタイル（Sans / Serif / Mono / 手書き / 装飾 / その他）・言語（JP/EN）・キーワード検索・お気に入りで候補を厳選。
- CSSコードを取得：気に入ったフォントの「CSS」ボタンでモーダルが開き、font-family / font-size / letter-spacing / line-height のセットをワンクリックでコピーできます。
主な機能
和文・欧文プレビューの分離
和文と欧文で別々のテキストを設定可能。欧文専用フォントには和文行を非表示にし、純粋な書体差を比較できます。
スタイル自動分類
フォント名から Sans / Serif / Mono / 手書き / 装飾 / その他を自動判定。膨大なフォントを目的別に瞬時に絞り込めます。
お気に入り保存
★ ボタンでマークすると localStorage に保存。リロード後もお気に入りが先頭に並びます。プロジェクトで頻用するフォントを蓄積できます。
ファミリー切替（バリアント）
Light / Regular / Medium / Bold / Italic などのウェイト・スタイルチップに対応。同一ファミリーで複数バリアントを並べて比較できます。
フォントキャッシュ
一度読み込んだフォントは端末内に保存され、次回からは許可不要で即表示。リセットボタンでクリア可能です。
CSSコード書き出し
font-family / font-size / letter-spacing / line-height をまとめた CSS をワンクリックでコピー。すぐにコーディングへ活用できます。
こんなシーンで活用できます
- Webデザイン・コーディング：候補フォントを並べて比較し、サイト全体のトーンに合う書体とサイズ・行間を選定
- LP・広告制作：ヒーローテキストや見出しの書体を実テキストでイメージ確認
- 雑誌・印刷物デザイン：見出し体・本文体の組合せ検討、ジャンプ率の検証
- プレゼン資料・スライド：可読性を確認しながら PowerPoint / Keynote 用フォントを選定
- ロゴ・タイトル制作：装飾系フォントを総当たりで探索し、ブランドの世界観に合う書体を発掘
よくある質問
Chrome / Edge 103 以降が Local Font Access API に対応しています。Safari・Firefox では未対応のため、標準フォントのみのフォールバック表示になります。
ありません。すべての処理はブラウザ内で完結します。フォント一覧・お気に入り・コンパクト表示などの状態は端末の localStorage に保存され、外部に送信されることはありません。
はい。お気に入りと読み込み済みフォントは localStorage に自動保存され、次回アクセス時に復元されます。リセットボタン（更新アイコン）でフォントキャッシュとフィルタ状態をクリアできます。お気に入りはリセット対象外なので、不要な★は各カードから個別に外してください。
フォント名から自動分類できなかったフォントが入ります。独自命名のフォント、デコフォント、記号・絵文字フォントなどが該当します。各ボタンに表示される件数バッジを合計すると「すべて」と一致するので、ヌケモレの確認に使えます。
本ツール自体は無料・登録不要で、商用プロジェクトでも自由にお使いいただけます。ただしフォント本体のライセンスは各フォントベンダーの規約に従ってください（特に Web フォント配信や埋め込み利用は別途許諾が必要なケースがあります）。
はい。OS と言語設定が返すフォント名がそのまま使われるため、Mac 日本語環境では「ヒラギノ角ゴ Pro N」など和文表記、Windows 英語環境では「Hiragino Sans」のような英文表記が出る場合があります。フォント名の下に併記される PostScript 名（英数字）は OS に依存せず一意なので、CSS 実装時の参照に便利です。