Google Fonts Sidebar

VS CodeのサイドバーでGoogle Fontsを検索・実フォントでプレビューし、CSS宣言をクリックしてコピーするTypeScript拡張機能です。ReactやAPIキーは不要です。

起動

このREADMEがある google-fonts-vscode フォルダーをVS Codeで開きます。

npm install
npm run compile

F5で「Run Google Fonts Extension」を起動し、開いたExtension Development HostのActivity BarからGoogle Fontsを選択します。Activity Barの位置はVS Codeの表示設定に従います。

検索欄に Inter と入力し、カードの font-family: "Inter", sans-serif; をクリックしてください。VS CodeのクリップボードAPIでコピーし、そのカードに1.6秒間 Copied! を表示します。ボタンはTabとEnter/Spaceでも操作できます。

実装

• src/services/fontService.ts: 非同期のカタログ取得とプレビュー文字列。将来のAPIへの差し替え箇所です。
• src/data/fonts.json: 指定された19種類を含む87種類のメタデータ。
• src/services/cssGenerator.ts: カテゴリ別fallbackとCSS文字列生成。
• src/FontsViewProvider.ts: Webview、CSP、メッセージ検証、クリップボード書き込み。
• webview/src/main.ts: 即時検索、カード表示、遅延フォント読み込み、コピー結果表示。
• webview/src/styles.css: VS Codeのテーマ変数を使った配色。

fontService.ts の previewText を変更すると、日本語を含む任意の固定プレビューに変更できます。読み込みURLの text パラメータもその文字列に追従します。

フォントは表示領域の80px手前から読み込み、同時読み込みは最大3種類です。読み込み済みフォントはWebview内で再利用し、一覧は24件ずつ追加表示します。通信失敗時は代替書体を実フォントとして見せず、エラーを表示します。検索を変更すると再試行できます。

一覧とコピーはオフラインでも動作します。実フォントのプレビューには fonts.googleapis.com と fonts.gstatic.com へのインターネット接続が必要です。コピーするのはfont-family宣言だけです。利用先のWebサイトでのフォント読み込み設定は別途必要です。

テスト

npm test

CSS fallback・エスケープ、カタログ、コピー完了を待つメッセージ処理、不正なフォント名、クリップボード失敗を検証します。

設計の参照: VS Code Webview API、Google Fonts CSS API。

カードUI・詳細・フィルター

フォント名、Variable軸数またはスタイル数、デザイナー、大きな実フォントプレビューを表示します。プレビューは右端でフェードします。カード上部をクリックすると、そのカード内に詳細が展開されます。CSSボタンは独立してコピーだけを行います。

• Language: 英語／Latin、日本語、キリル文字、ギリシャ語、ベトナム語、デーヴァナーガリー。
• Font style: Sans serif、Serif、Monospace、Display、Handwriting。
• 検索と両フィルターはAND条件で適用され、Resetで解除できます。
• 日本語などの選択時は対応するプレビュー文字列に切り替わります。
• 詳細: デザイナー、カテゴリ、対応言語・文字体系、ウェイト、Normal/Italic、可変軸と範囲。
• 検索・フィルター・選択状態はWebviewの再表示時にも保持します。

言語判定には公式メタデータのsubsetsを使用します。文字体系単位のフィルターを含み、全言語の全文字対応を保証する意味ではありません。メタデータは2026-09-08時点のGoogle Fonts公式リポジトリから同梱し、各レコードのmetadataSourceに出典を記録しています。可変フォントのウェイト範囲はaxes、variantsは配布ファイルのスタイル情報です。

確認結果

npm run compile / npm test: 成功（4テスト）。追加のDOMテストで日本語＋Serifによる絞り込み、検索の組み合わせ、詳細の開閉、リセット、コピー成功通知と表示復帰を検証しています。今回のUI変更について、Extension Development Hostでの目視確認は未実施です。

日本語カタログ更新（0.1.1）

Google Fonts公式カタログのjapanese subsetを持つ68ファミリーを同梱しました（全87ファミリー）。日本語を選択すると68件が対象になります。初期表示は24件で、Show more fontsから残りを表示できます。検索は未表示分も含めた全件を対象にします。

開発時の再取得は npm run update:japanese → npm run compile です。利用者のAPIキーは不要です。取得元: https://fonts.google.com/metadata/fonts （2026-09-08取得）。