右クリックでのフォント検査
ページのコンテキストメニューから拡張機能を開き、ファミリー、ウェイト、サイズ、色、コントラスト、利用可能なフォントファイル情報など、ライブのタイポグラフィ詳細を確認できます。
概要
Tinkerfontは、ライブサイト上のタイポグラフィをテストするためのブラウザ拡張機能とアドオンです。フォントを検査し、代替フォントに差し替え、スタイルシートやデザインシステムを変更する前に、実際のコンテンツ、レイアウト、ブレークポイント上でどのように見えるかを確認できるように設計されています。
この製品はChromeとFirefoxで動作し、文脈の中でフォント選択を評価したい人向けです。右クリックでのフォント検査、DOMスキャン、Bunny Fonts検索、カスタムフォントのアップロード、要素のスコープ指定、ホスト名ごとの永続化に対応しており、テスト設定を後から再利用できます。
機能
ライブフォント検出
ライブDOMをスキャンして、ページ上で実際に使用されているファミリーを件数付きで確認し、1つのファミリーを対象にするか、ワイルドカードで全フォントを置き換えられます。
ワンクリックのフォント差し替え
Bunny Fontsを検索するか、カスタムフォントファイルをアップロードして、CSSを編集したりコードをデプロイしたりせずに、現在のページ上で差し替えをプレビューできます。
範囲指定
ナビゲーション、表、ヒーローセクションなど、ページ全体ではなく特定の要素を選んで、フォント変更をページの一部に限定できます。
サイト別の保存ルール
差し替えルールとスコープをホスト名ごとに保存することで、更新後や後日の訪問でも同じプレビュー設定を維持できます。
設定のエクスポートとインポート
ルールをJSONとしてバックアップし、別のブラウザに復元できます。カスタムフォントはインポート後に再アップロードが必要です。
主なユースケース
ライブコンテンツでのタイポグラフィ確認
差し替えたフォントをモックアップではなく実際の記事、ランディングページ、インターフェースと比較し、間隔、階層、可読性を文脈の中で検証できます。
実装前のフォントテスト
CSSで変更を加える前に、候補の書体をステージング環境や本番ページでプレビューし、デザインツールとコードの往復を減らせます。
範囲を絞ったセクションテスト
ナビ、ヒーロー、表、その他のページセクションのうち、1つの領域だけを順に評価したい場合に、フォントの実験をその範囲に限定できます。
ライブフォント監査
ページのフォントを検査し、コンテキストメニューから値をコピーし、ライブ結果を使って、調整前にサイトが現在何を使っているかを把握できます。
ブラウザ間での設定移行
設定をエクスポートして別のブラウザやデバイスにインポートすることで、確立済みのフォントルールを移行できます。
Pros and Cons
Pros
- ライブページ上で直接動作するため、実際のコンテンツとレイアウトに対して書体の選択を判断できます。
- Bunny Fontsとアップロードしたフォントファイルの両方をサポートしており、カタログ検索とカスタム書体を使い分けられます。
- ページ全体ではなく、1つの領域だけに変更を限定できます。
- ルールをホスト名ごとに保存するので、同じサイトやステージング環境に再訪する際に便利です。
- 設定をブラウザ間で移すためのエクスポートとインポートが含まれています。
Cons
- ソースには、無料で使えること以外の価格帯や有料プランの詳細は示されていません。
- chrome:// URLやChrome Web Storeなど、制限されたブラウザページを含む一部のページはテストできません。
- カスタムフォントはルールとしてエクスポートとインポートができますが、フォントファイル自体は新しいデバイスでインポート後に再アップロードする必要があります。
FAQ
Tinkerfontは何に使いますか？
Tinkerfontは、ライブサイト上でタイポグラフィを試作するためのブラウザ拡張機能です。ページ上のフォントを検査し、Bunny Fontsや自分のアップロードしたフォントに差し替え、CSSを変更する前に実際のコンテンツ上で結果を確認できます。
Tinkerfontは無料ですか？
はい。ページには、Tinkerfontは無料でインストールして使用でき、任意の支援者からの寄付が開発資金に役立つと記載されています。利用可能なソースには、有料プランや使用制限の記載はありません。
Tinkerfontはどのブラウザに対応していますか？
TinkerfontはGoogle ChromeとMozilla Firefoxで利用できます。サイトには、Chrome拡張機能に対応したChromiumベースのブラウザでもChrome版が動作する可能性があるとありますが、対応ブラウザとしてテストされ、提供されているのはChromeとFirefoxです。
Tinkerfontで自分のフォントをテストできますか？
Customタブで .woff2、.woff、.ttf、.otf ファイルをアップロードできます。拡張機能はBunny Fontsの検索にも対応しており、置き換えをページ上に直接適用できます。
フォント設定を保存したり移行したりできますか？
はい。差し替えルールと範囲はローカルストレージにホスト名ごとに保存され、パネルのヘッダーにはExportとImportの操作があるため、設定を別のブラウザへ移せます。
Quick Facts
- カテゴリ
- ブラウザ拡張機能
- プラットフォーム
- Google Chrome, Mozilla Firefox
- 主な用途
- ライブサイトでのフォント検査とタイポグラフィの試作
- ソースドメイン
- mighil.com
- フォントソース
- Bunny Fontsとカスタムアップロード
- 保存先
- ホスト名ごとのローカルストレージ
Tinkerfontの代替品
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
Manta AI
Manta AIは、URLからアプリの挙動を把握し、回帰を検出し、スクリプトやセレクタ管理なしでテストを生成できる自律型Webアプリテストツールです。
FixMyCWV
FixMyCWVは、LCP・INP・CLSの改善点を開発者向けに示すWebベースのCore Web Vitals監査ツールです。幅広いサイト構成に対応し、bot対策サイトにも対応可能です。
PromptLayer
PromptLayerは、LLMのプロンプトとエージェントのバージョン管理、テスト、監視を行うLLM運用プラットフォームです。AIエンジニアと専門家がコードを書かずに共同でプロンプト運用できます。
Evidently AI
Evidently AIは、LLM、RAG、AIエージェント、予測MLモデルの評価と監視を行うオープンソースプラットフォームです。テスト実行、合成データ生成、本番品質の追跡を、組み込みおよびカスタム指標で支援します。
TestSprite
TestSpriteは、ソフトウェアチーム向けのAIテストエージェント兼自動化プラットフォームです。最小限の入力でテストの計画、生成、実行、デバッグ、レポート作成を支援し、MCP、IDE、CI環境に対応します。