フォントプレビュー
この端末にインストールされている任意のフォントでテキストを確認できるほか、フォントファイルをアップロードして CSS をコピーできます。
この端末にインストールされているフォントをすべて一覧表示します。Chromium 系ブラウザ専用で、初回に一度だけ権限を求められます。
まだアップロードされていません。
TTF・OTF・WOFF・WOFF2、1 ファイル 20 MB まで。アップロードしたフォントはこのページ内にだけ登録され、外部へ送信されることはなく、再読み込みで破棄されます。
font-family: system-ui; font-size: 44px; font-weight: 400; font-style: normal; letter-spacing: 0px; line-height: 1.35; text-align: left; text-transform: none; color: #0f172a; background-color: #ffffff;
フォントプレビューツールとは
ウェブ上のフォントプレビューの多くは、同じ「ウェブセーフフォント」の短い一覧を見せるだけです。それはもう知っている顔ぶれですし、あなたの端末に実際に何が入っているかについては何も教えてくれません。このページは逆に、あなた自身の環境を出発点にします。
フォントの取り込み方は三つあります。総称ファミリー（system-ui、sans-serif、serif、monospace）はどのブラウザでも使えます。「ローカルフォントを読み込む」は、ブラウザの Local Font Access API を使ってこの端末にインストールされた書体をすべて列挙し、選択肢に並べます。アウトラインはすでに端末にあるため、ダウンロードは発生せず即座に描画されます。あるいはフォントファイル（TTF、OTF、WOFF、WOFF2）をアップロードすれば、このセッションのあいだ登録されるので、ライセンス済みのブランド書体をインストールせずに校了確認できます。
フォントを選んで自分のテキストを入力し、サイズ、ウェイト、スタイル、字間、行間、色、行揃えを調整してください。文字セットの行で数字や約物の挙動を確認でき、CSS ブロックはそのままコピーできます。適用中のフォントがアップロード由来の場合は @font-face のひな形も含まれます。
入力したテキストもアップロードしたファイルも、ブラウザの外に出ることはありません。
使い方
基本の流れ
- 「フォントのソース」パネルでフォントを選びます。総称ファミリーはどこでも使えます。「ローカルフォントを読み込む」を押すと、この端末にインストールされたすべてのフォントが一覧されます。
- 手元のファイルをプレビューしたい場合は、「フォントファイルをアップロード」から TTF、OTF、WOFF、WOFF2 を選びます。このセッション中だけ登録され、同じ選択肢に並びます。
- 校了を確認したいテキストを入力します。見出し、ボタンのラベル、製品名など。
- サイズ、ウェイト、スタイル、字間、行間、行揃え、大文字・小文字、2 つの色を調整します。プレビューに適用される CSS プロパティは、スタイルシートに書くものと同じです。
- CSS ブロックをコピーします。アップロードしたフォントの場合は @font-face のひな形も含まれ、ファイル名がパスの置き場所として入っています。
正確に使うためのヒント
- 列挙される一覧は正確ですが、それはこの端末についての情報です。ここに入っているものが閲覧者の端末にあるとは限りません。本番の CSS には必ずフォールバックを書いてください。
- ローカルフォントの列挙は Chromium 系専用で、安全なコンテキスト（HTTPS または localhost）が必要です。Safari と Firefox ではボタンを隠して理由を表示します。アップロードは引き続き使えます。
- 複数のウェイトやスタイルを持つファミリーは、選択肢に一度だけ現れます。実際に収録されている字面へは、ウェイトとイタリックの切り替えで移動してください。
- アップロードしたフォントはメモリ上にしか存在せず、再読み込みで消え、ディスクにも書き込まれません。これは設定で回避できる制限ではなく、意図した挙動です。
- 大きな CJK フォント（10 MB 以上）は解析に少し時間がかかります。デコードが終わり次第、選択肢が更新されます。
活用シーン
ローカルフォントとアップロードの仕組み
ここでは関連のない二つのブラウザ API が働いていて、挙動は大きく異なります。
インストール済みフォントの列挙には Local Font Access API を使います。window.queryLocalFonts() はインストールされた字面ごとに、ファミリー名・フルネーム・PostScript 名・スタイルを含むレコードを返します。ページはそれをファミリー名でまとめて並べ替え、選択肢に渡します。描画にダウンロードは不要で、ファミリー名をそのまま CSS に渡せば字形は OS が提供します。これは自分のスタイルシートに書いた場合とまったく同じ経路です。Chromium 系は一度だけの権限要求のうえでこの API を提供しますが、Safari と Firefox は実装していないため、失敗させて放置するのではなく入口自体を隠します。
アップロードには Font Loading API を使います。ファイルを ArrayBuffer として読み、new FontFace(family, buffer) に渡して load() し、document.fonts に追加します。この時点からそのフォントは他のファミリーと何ら変わらず、CSS から名前で参照できます。
- queryLocalFonts() は安全なコンテキスト（HTTPS または localhost）を要求し、権限ダイアログが閉じられた場合は NotAllowedError で reject します。例外を投げるのではなく、パネルがどちらの場合も表示で知らせます。
- 同じファミリーが複数のスタイルで現れることがあります。一覧はファミリー名で重複を除くため、各書体は一度だけ現れ、字面の選択はスタイルのコントロールで行います。
- FontFace が受け付けるのは TTF、OTF、WOFF、WOFF2 です。破損ファイルや非対応形式では load() が reject し、選択肢に壊れた項目を残すのではなくエラーを表示します。
- アップロードされたフォントはメモリ上にのみ保持されます。ネットワーク要求もディスク書き込みも localStorage への保存もありません。だから再読み込みで消えるのです。
- 総称ファミリーはブラウザ内部で解決され、API をまったく必要としません。そのため他の二経路が使えない環境でも常に利用できます。
例
端末のインストール済みフォントを列挙する
const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]
const families = [...new Set(faces.map((f) => f.family))].sort();
// 選択したらそのまま CSS へ。字形は OS が提供し、ファイルはダウンロードされない
element.style.fontFamily = `"${families[0]}", sans-serif`;アップロードしたファイルを登録する
const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load(); // 破損や非対応形式ではここで reject する
document.fonts.add(face);
// 以降はローカルフォントとまったく同じに扱える
element.style.fontFamily = '"Aurora Sans", sans-serif';アップロードフォントの CSS ブロック
@font-face {
font-family: "Aurora Sans";
src: url("./AuroraSans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;
/* src のパスはプレースホルダです。自分のホスティング先に置き換えてください */よくある質問
「ローカルフォントを読み込む」ボタンが表示されません。
Local Font Access API は Chromium 系ブラウザ（Chrome、Edge、Opera、Brave）にしか実装されておらず、安全なオリジン（HTTPS または localhost）も必要です。Safari と Firefox ではボタンを隠し、パネルに理由を表示します。フォントファイルのアップロードと総称ファミリーはどちらも引き続き使えます。
インストール済みフォントの読み取りでサーバーに何か送信されますか。
いいえ。ブラウザが権限ダイアログを表示し、許可したあとにページへ渡るのはファミリー名とスタイル名だけです。フォントのデータが読まれることも、アップロードされることも、一覧がどこかへ送信されることもありません。
アップロードしたフォントは保存されたり送信されたりしますか。
どちらもありません。ファイルはメモリに読み込まれてブラウザのフォントセットに登録され、ページを閉じるか再読み込みすれば破棄されます。ネットワーク要求も、ディスクへの書き込みも、localStorage への保存も行いません。
再読み込みするとアップロードしたフォントが消えるのはなぜですか。
意図的にメモリ上にしか保持していないためです。永続化するにはフォントファイルをブラウザのストレージに書き込む必要がありますが、プレビュー用途のツールが、すでに手元にあるファイルのコピーを保持する理由はありません。続けて使う場合は再度アップロードしてください。
アップロードできる形式を教えてください。
TTF、OTF、WOFF、WOFF2 で、1 ファイル 20 MB までです。これはブラウザの FontFace が受け付ける四つのコンテナ形式です。TrueType コレクション（.ttc）は複数の字面をひとつのファイルに束ねる形式で対応していないため、個別の字面を書き出してください。
一部のウェイトが不自然に太く見えます。
ファミリーに存在しないウェイトを指定すると、ブラウザが合成します。フェイクボールドはアウトラインを太らせ、フェイクイタリックは字形を傾けます。600 だけが滲み、400 と 700 が正常なら、そのファミリーに 600 は用意されていません。
閲覧者のインストール済みフォントを調べる用途に使えますか。
できません。そもそもどのウェブサイトにもできません。列挙には閲覧者自身の端末での明示的な権限ダイアログが必要なので、ページが気づかれないうちに他人のフォントを棚卸しすることは不可能です。ここで見える一覧はこの端末についてのものであり、だからこそ本番の CSS にはフォールバックが必要です。
@font-face の src には何を書けばよいですか。
自分のビルドがフォントファイルを配信するパスです。例：/fonts/AuroraSans.woff2。format() キーワードは拡張子から正しく生成されているので、差し替える必要があるのは URL だけです。
関連ツール
グラデーション生成器
オンラインCSSグラデーション生成ツール。リニアグラデーション、ラジアルグラデーション背景を作成。色を視覚的に調整し、ワンクリックでCSSコードをコピー。
画面テスト
オンライン画面テストツール。ドット抜け、輝点、バックライト漏れを検出。複数の単色テスト、コントラストテストでディスプレイ品質を評価。
カラーピッカー
オンラインカラーピッキングツール。HEX、RGB、HSLフォーマットの相互変換。カラーパレットを生成し、Web配色を取得し、デザイン効率を向上。
QRコード生成器
オンラインQRコード生成ツール。テキスト、URL、名刺など複数タイプ対応。スタイル、色、サイズをカスタマイズし、ワンクリックで高画質画像をダウンロード。
SVGビューア
リアルタイムプレビュー付きオンラインSVGビューア＆エディタ。SVGコードを編集し、変更を即座にプレビュー、SVGファイルをダウンロード。フロントエンド開発者とデザイナーに最適。
バーコード生成器
オンラインバーコード生成器。CODE128、EAN13、EAN8、UPC、CODE39、ITF14形式に対応。色やサイズをカスタマイズし、PNGまたはSVG形式でバーコードを生成・ダウンロード。
