VS Code でフォントファイルをプレビューする
Font Viewer を入れると、.ttf、.otf、.woff、.woff2、.ttc、.otc をクリックするだけで、VS Code の中でフォントをプレビューできます。タイプテスター、グリフ一覧、文字マップ、フォント情報、@font-face のコピーは無料です。Zovo Pro(USD 19、買い切り)では WOFF2 / WOFF / TTF への変換と、フォルダ内のフォントの一覧レポートが加わり、それぞれ 3 回まで無料で試せます。
無料、MIT ライセンス。 Extension ID zovo.font-viewer-vscode.
VS Code での手順
- Marketplace から Font Viewer をインストールします。Ctrl+P (macOS では Cmd+P) を押して
ext install zovo.font-viewer-vscodeを実行しても入ります。 - エクスプローラーでフォントファイルをクリックします。Font Viewer はこれらのファイルの既定のエディターで、読み取り専用で開くため、フォント自体が変更されることはありません。
.ttc/.otcのコレクションは、ヘッダーの一覧からフォントを選びます。 - Type tester タブでサンプルテキストを入力し、8〜200 px のサイズスライダーと 12〜96 px のウォーターフォールで見え方を確認します。可変フォントは軸ごとのスライダーで、
liga、kern、ss01、zeroなどの OpenType 機能はチェックボックスで切り替えられます。 - Glyphs タブでは、すべてのグリフがアウトラインから描かれます。名前、文字、
U+20AC、グリフ ID で検索でき、文字、コードポイント、SVG のアウトラインをコピーできます。20,000 グリフの CJK フォントも、ページ単位で読み込むので素早く開きます。 - Characters タブでは、Unicode ブロックごとの収録状況(Basic Latin 95/128 のような形)を確認します。Info タブでは、ライセンス、デザイナー、著作権、埋め込み権限、メトリクス、テーブルの一覧を見られます。
- Copy CSS を使うと、
@font-faceルールと、それに合ったfont-variation-settings、font-feature-settingsをコピーできます。エクスプローラーでフォントを右クリックして「Copy CSS @font-face」を選べば、開かずにコピーすることもできます。
Cursor、Windsurf、VSCodium の場合
これらのエディターは Open VSX から拡張機能を入れます。Extensions ビュー (Ctrl+Shift+X) で zovo.font-viewer-vscode を検索して Install を押してください。Open VSX のページは zovo/font-viewer-vscode です。あとは VS Code と同じ手順で使えます。
無料でできること
タイプテスター、グリフ一覧と検索、文字マップ、Info タブ、CSS のコピー、コレクション内のフォントの切り替えはすべて無料です。オフラインで動作し、ネットワーク通信とテレメトリーはありません。フォントを新しくビルドして上書き保存すると、開いているビューが再読み込みされます。
Zovo Pro で追加されるもの
TTF や OTF を Web 用の WOFF2 / WOFF に変換し、WOFF2 をインストールできる TTF / OTF に戻すこともできます。1 つのフォントでもフォルダ全体でも変換でき、新しいファイルは元のファイルの隣に保存されます。TTC は書体ごとに 1 ファイルになります。テーブルのデータはそのままコピーされるので、アウトライン、ヒンティング、可変軸、OpenType 機能は変わりません。たとえば JetBrains Mono の可変フォントは、WOFF2 にすると 96,940 バイトから 43,632 バイト(約 45%)になります。もう 1 つの Pro ツール Font Folder Report は、フォルダ内のすべてのフォントのファミリー、スタイル、ウェイト、バージョン、ライセンス、埋め込み権限などを、CSV、Markdown の表、または fonts.css にまとめます。
Convert Font to WOFF2, WOFF or TTF の使い方
- フォントを開いてエディタータイトルの「Convert Font to WOFF2, WOFF or TTF… (Pro)」を押すか、エクスプローラーでフォントまたはフォルダを右クリックして同じ項目を選びます。
- 変換先の形式を選びます。変換後のファイルは元のファイルと同じ場所に保存されます。
Convert Font to WOFF2, WOFF or TTF はライセンスなしで 3 回まで使えます。ファイルを開いたときにポップアップが出たり、残り日数が表示されたりすることはありません。
Zovo Pro は USD 19 の買い切りです。サブスクリプションではなく、すべての Zovo 拡張機能の Pro ツールが使えるようになります。カード (Stripe) で支払うと、次のページにライセンスキーが表示されます。VS Code のコマンドパレットで "Enter Zovo Pro license key" を実行し、キーを貼り付けてください。キーはネットワークを使わずに手元のパソコンで確認されます。
5 人までのチーム向けは USD 59 の買い切りで、カードで支払えます。ルールと Pro ツールの一覧は Zovo Pro のページ (英語) にあります。
できないこと
- WOFF2 のコレクション、SVG フォント、
.dfont、Type 1 フォントには対応していません。 - 64 MB(
fontViewer.maxFileMB)を超えるファイルは開かず、メッセージを表示します。 - グリフ一覧には可変フォントの既定のインスタンスが表示されます。カラーフォント(COLR、SVG、sbix、CBDT)は、タイプテスターと文字マップではカラーで、グリフ一覧ではアウトラインだけで表示されます。
よくある質問
無料で使えますか?
はい。フォントのプレビューに関する機能はすべて無料です。フォントの変換とフォルダのレポートは Zovo Pro のツールで、それぞれ 3 回まで無料で試せます。試用回数はファイルが書き出されたときだけ減ります。
日本語フォントのような大きなフォントも開けますか?
はい。グリフはページ単位で読み込まれるため、20,000 グリフ規模の CJK フォントも素早く開きます。ファイルサイズの上限は既定で 64 MB です。
Cursor でも使えますか?
はい。Open VSX からインストールできるので、Cursor、Windsurf、VSCodium でも使えます。
すべての機能と設定は Font Viewer のページ (英語) にあります。
ほかのガイド
- VS Code で音声ファイルを再生・解析する
- HTML・JSX・Vue のタグを対で自動リネームする
- Claude Code と Codex の履歴を VS Code で読む
- DXF 図面を VS Code で表示する
- VS Code で SQLite データベースを編集する
- EXE・DLL・ELF を VS Code で解析する
拡張機能のバージョン 0.2.2 で確認しました (2026-11-12)。