フォントテスターとは？

フォントテスターは、デザインやウェブサイトで使用する前に、タイプフェイスがどのように見えるかをプレビューできるツールです。フォントをオペレーティングシステムにインストールしたり、プロジェクトに埋め込んだりする代わりに、ブラウザに直接読み込んで、文字、数字、記号がどのようにレンダリングされるかを正確に確認できます。これは、カスタムフォントや不慣れなフォントを評価する場合に特に便利です。タイプフェイスの視覚的な特性（プロポーション、ウェイト、スペーシング、リズム）は、実際のテキストとの関連でのみ判断できるためです。

最新のブラウザはFontFace APIを公開しており、ローカルファイルからフォントを登録し、サーバーにアップロードすることなくページ上の任意の要素に適用することが可能です。すべてのレンダリングはローカルで行われるため、フォントファイルはデバイスから出ることはありません。

ツールの説明

このフォントテスターでは、フォントファイル（TTF、OTF、WOFF、またはWOFF2）をアップロードし、完全にカスタマイズ可能なタイポグラフィ設定でそれを即座にプレビューできます。サイズ、行の高さ、文字間隔、単語間隔、ウェイト、スタイル、配置、色を調整し、複数のサンプル（サンプルテキスト、全アルファベット、数字、記号、サイズスケール）でライブレンダリングされた結果を確認して、あらゆる角度からタイプフェイスを評価できます。

フォントはブラウザ内に完全に読み込まれます。アップロード、アカウント、インストールは不要です。

例

入力： カスタム.woff2ファイルとサンプルテキストThe quick brown fox jumps over the lazy dog.

出力： 選択したサイズ、ウェイト、スペーシングでアップロードされたフォントでレンダリングされたその文を含むライブプレビュー、および大文字アルファベット、小文字アルファベット、数字、記号、および12、16、20、24、32、48、64、96ピクセルで繰り返されるパングラムを表示する個別のパネル。

機能

  • ローカルフォント読み込み: TTF、OTF、WOFF、またはWOFF2ファイルをドロップして、すぐに適用されたものを確認
  • 完全なタイポグラフィコントロール: フォントサイズ、行の高さ、文字間隔、単語間隔、ウェイト、イタリック、配置を調整
  • 色のカスタマイズ: テキストと背景色を選択して、コントラストとブランドに合った組み合わせをテスト
  • 複数のサンプル: カスタムテキスト、全アルファベット、数字、記号、サイズスケールでフォントをプレビュー
  • プライバシーに配慮: ファイルはブラウザで処理され、サーバーにアップロードされることはありません

ユースケース

  • 購入またはダウンロードしたフォントの評価: ブランドやプロジェクトにコミットする前に、さまざまなサイズ、ウェイト、色でタイプフェイスを試す
  • ウェブフォントレンダリングのテスト: .woff2ファイルがブラウザでどのように実際に表示されるか、カーニング、スペーシング、イタリックスタイルを含めて確認
  • ウェブサイトまたはアプリのタイポグラフィ設計: フォントサイズ、行の高さ、文字間隔を素早く反復して、適切な組み合わせを見つける

サポートされている形式

  • TTF (TrueType Font)
  • OTF (OpenType Font)
  • WOFF (Web Open Font Format)
  • WOFF2 (Web Open Font Format 2.0)

オプションの説明

  • サンプルテキスト — メインプレビューパネルに表示されるテキスト。複数行をサポート。
  • フォントサイズ — メインプレビューテキストのサイズ（ピクセル、8～200）。アルファベット、数字、記号パネルはこの値の75%でレンダリングされます。
  • 行の高さ — 行間の垂直スペーシング。フォントサイズのパーセンテージで表現（50～300%）。
  • 文字間隔 — 個々の文字間の追加スペース（ピクセル、-10～30）。負の値はテキストを詰めます。
  • 単語間隔 — 単語間の追加スペース（ピクセル、-10～50）。
  • フォントウェイト — 100（Thin）から900（Black）の数値ウェイト。フォントファイルに実際に含まれているウェイトのみが明確にレンダリングされます。その他はブラウザでシミュレートされます。
  • イタリック — font-style: italicを切り替え。フォントにイタリック変種がない場合、ブラウザは傾斜バージョンを合成する可能性があります。
  • テキスト配置 — プレビューパネルの左、中央、右、または両端揃え配置。
  • テキスト色 / 背景色 — すべてのプレビューパネルで使用される色。フォントを意図した背景でプレビューするのに便利です。

ヒント

  • 一部のフォントは単一のウェイトのみで提供されます。太字または細字に切り替えると、同じに見えるか、ブラウザの合成スタイルにフォールバックする可能性があります。ウェイトが間違って見える場合は、フォントのドキュメントを確認してください。
  • サイズスケールパネルを使用して、小さいサイズでのヒント処理が不十分なフォントを見つけます。64pxで優雅に見えるタイプフェイスは、12pxで読めなくなる可能性があります。
  • 明るい背景と暗い背景の両方に対してフォントをテストします。細いウェイトは暗い背景では消えることが多く、アップする必要があります。
  • 大文字と小文字のパネルを並べて比較して、x高さ、キャップハイト、全体的なリズムを評価します。

制限事項

  • 標準的なウェイトとイタリック以外の可変フォント軸は個別に公開されていません。
  • リガチャ、スタイリスティック代替、スモールキャップなどのOpenType機能は、ブラウザのデフォルトを使用してレンダリングされ、UIで切り替えることはできません。
  • 非常に大きなフォントファイルは、読み込みと解析に時間がかかる場合があります。