Tinkerfont

• 1. 概要 （全 395 文字）

  Tinkerfont は無料のブラウザ拡張機能 (Chrome および Firefox) で、デザイナー、フロントエンド エンジニア、いじくり担当者は、DevTools を開いたり、CSS を変更したり、Figma に切り替えたりすることなく、実際の Web サイト上でフォントの検出、フォントの置換、効果のプレビューをリアルタイムで直接行うことができます。これは、独立した開発者である Mighil によって設計および開発され、2026 年 6 月末に Product Hunt でリリースされました。現在完全に無料で、アカウントは必要なく、閲覧データも収集しません。その価値は、「大きい」ことにあるのではなく、デザインとフロントエンドのコラボレーションの間で頻繁に起こる小さくて頻繁な摩擦を正確に取り除くことにあります。つまり、実際の Web ページで「フォントを変更すると見栄えが良くなるかどうかを試してみる」ということです。

• 2. 製品の背景 （全 791 文字）

  Tinkerfont の開発者は Mighil (個人 Web サイト mighil.com) です。彼は自分自身を「ジェネラリスト」と表現しており、デザインとコーディングの両方を行っています。彼は、クライアントのリリース前のサイトをレビューしたり、他の人が書いたコード ベースを引き継いだり、特定のページを別のフォントに変更した方が見た目が良くなるかどうか疑問に思ったりするなど、「組版は重要だが主な仕事ではない」というシナリオによく登場します。同氏は構築メモの中で、DevTools では問題の半分しか解決できないと述べた。 「オンライン ページで直接フォントを変更してみて終了する」という簡単な方法はこれまでになかったので、Tinkerfont はもともとこのギャップを埋めるための小さなツールでした。   この製品は元々単なる「フォントの置き換え」でした。現在ページで使用されているフォントを選択し、それに配置する候補フォントを選択し、スクロールして効果を確認し、決定します。後の右クリック チェッカーは、フォンタネッロに触発されて追加されました。ミヒルは、最初のアイデアについてラース ヴェストフェルトとフレドリック バーグマンの功績を公に認めています。 Chrome バージョンが安定した後に Firefox バージョンが続き、ほぼ同じコード セットを共有し、ブラウザ アダプテーション レイヤーのみを追加しました。この製品には外部からの資金調達や法人組織はありません。 Chromeのストアページには開発者が「トレーダーとしての自己認証を行っていない」と明記されており、典型的な独立系開発者の作品として位置づけられている。ローンチノードでは、2026 年 6 月 30 日に Product Hunt のデイリー リストに掲載されました (当日の投票数は約 140)。その後、7 月 1 日頃に複数の中国語と英語の新製品集約サイトに掲載されました。

• 3. 製品の機能と使用感 （全 1228 文字）

  Tinkerfont のコア ワークフローには 4 つのアクションがあります。 1 つ目は「チェック」です。ページ上のテキストを右クリックすると、フォント ファミリー、フォントの太さ、フォント サイズ、色、コントラストが表示されます。必要な値をワンクリックでコピーできます。フォントファイルのURLがある場合にも表示されます（実験機能）。 2 つ目は「スキャン」です。パネルを開くと、リアルタイム DOM がスキャンされ、ページ上で実際に使用されているすべてのフォント ファミリと、それぞれの出現数がリストされます。フォント ファミリをクリックしてロックするか、アスタリスクを使用してすべてを表します。 3 つ目は「置換」です。Bunny Fonts で 1900 以上のオープンソース フォントを検索するか、独自の .woff2/.woff/.ttf/.otf ファイルをアップロードして、ワンクリックでページに適用します。 4 つ目は「限定された範囲」です。置換をサイト全体に適用するのではなく、ナビゲーション バー、ヒーロー領域、または選択した任意の領域にのみ適用できます。   継続性のエクスペリエンスが、同様のツールとの違いです。置換ルールはホスト名ごとにローカル ストレージに保存され、更新または数日ごとに戻った後もそこに残ります。パネルのエクスポート/インポートでは、ルールを JSON にバックアップし、ブラウザーやデバイスを変更するときに Bunny ルールを持ち込むことができます (カスタム フォント ルールではフォント ファイルの再アップロードが必要です)。バージョン 1.1.0 (2026 年 7 月 10 日に更新) では、tinkerfont.com/go の「共有リンク」が追加されました。現在のサイトのルールおよび制限された領域からリンクを生成し、同僚は同じサイトで Tinkerfont を開いて貼り付けて再現できます。また、開発への配信を容易にするために、有効なルールから CSS スニペットを直接コピーすることもサポートされています。   複雑な技術的な実装はありません。Chrome 側では Manifest V3、バックグラウンド サービス ワーカー、コンテンツ スクリプト インジェクションを使用し、パネルは iframe フローティング レイヤーによって運ばれます。 Bunny フォント ディレクトリは拡張機能に入力された JSON であり、Bunny が新しいフォントを追加すると小さな Node スクリプトによって更新されます。重要なトリックは、外部フォント CDN をブロックする厳格な CSP サイトでも正常に変更できるように、Bunny フォントをデータ URL でインライン化することです。 SPA または遅延読み込みコンテンツが発生した場合は、MutationObserver を使用して効果的なルールを再適用し、ページをめくった後に置換が消えてしまうのを防ぎます。 Chrome ストアによると、インストール パッケージはわずか約 71 KB で、非常に軽量です。

• 4. 価格設定とビジネスモデル （全 387 文字）

  Tinkerfont は完全に無料で、有料枠やアカウント システムはありません。開発者は複数のチャネルで、オプションのサポーターからの寄付は進行中の開発資金として使用されるが、すべての機能は無料で使用できることを明らかにしています。プライバシーポリシーには、サーバーを運営しておらず、アカウントも必要とせず、閲覧データをTinkerfontサーバーに送信しないと記載されています。フォント ルール、領域範囲、テーマ、アップロードされたフォントはすべて、デバイス上にローカルに保存されます (Chrome の chrome.storage.local / Firefox の browser.storage.local)。このモデルは、直接的な収益化経路がなく、サブスクリプションや広告ではなく口コミやコミュニティの広がりに依存する、独立系開発者向けのポートフォリオ ツールに近いことを意味します。

• 5. ユーザーレビュー （全 787 文字）

  肯定的なフィードバックは、「高速」と「プロセスを中断しない」ことに焦点を当てていました。多くのユーザーは、プレリリース サイトをレビューしたり、バージョンを改訂したりする前に、フォント マッチングをすばやく確認したいときに、Tinkerfont を使用すると、DevTools を開いたり、ブランチを作成したり、スタイル シートを変更したりする必要がなくなると述べています。スクリーンショットを撮るだけで、会議に参加したり、同僚に送信したりできます。痛みのある箇所に的確に当ててくれます。コミュニティ集約サイトである neodrop のコメントでは、このツールを「小さな摩擦を取り除く」タイプのツールとして分類しています。機能はほとんどありませんが、たまたまデザインとフロントエンドのコラボレーションの間に挟まれているだけで、頻繁に使用するのが簡単です。 Chromeストアページの評価は5.0となっていますが、評価サンプル数が少なく参考値が限られています。   マイナス点や制限に関して、ユーザーが最も言及しているのはブラウザの対応範囲です。公式は Chrome と Firefox、およびその他の Chromium ベースのブラウザのみをテストしてリリースしていますが、保証はありません。カスタム フォント ルールでは、フォント ファイルを別のデバイスにインポートした後に再度アップロードする必要があり、移行は十分にスムーズではありません。本質的にサポートされていない別のタイプのシナリオがあります。つまり、Chrome ウェブストア自体と chrome:// などのページでは拡張機能をまったく実行できません。ヘビー ユーザーにとって、チーム コラボレーション バックエンドはなく、共有はリンクまたは JSON ファイルのみに依存できます。複数の人がフォントのセットを並行して変更するというシナリオは厄介なものになります。

• 6. 業界の評価 （全 475 文字）

  業界の観点から見ると、Tinkerfont は一般に、プラットフォーム製品ではなく、「軽量でシングルポイントで、1 つのことをうまく実行する」独立したツールとして分類されます。 ustackなどの新製品集約サイトは同日のLoad NovaやCladeなどと並べ、「実際のWebページでフォントを試してみる」という位置づけを強調している。 Toolradarの編集者は、最大の利点は「アカウントなし、データ収集なし、完全無料」であり、最大の欠点は「ChromeとFirefoxのみ」であるとコメントしました。 neodrop は、7 月 1 日に新製品を分析した際、その日の製品群は壮大なプラットフォームの夢ではなく、ワークフローの小さな穴を埋めるものであると指摘しました。 AgentPeek と Tinkerfont に対する答えは、どちらも高頻度のアクションに従い、ユーザーは毎日それらを開く意欲があるため、「より直接的」でした。全体として、メディアがこの製品をどのように位置付けているかは明らかです。過小評価されているものの、抑制と地域優先に優れた実用的なガジェットです。

• 7. 論争とリスク （全 695 文字）

  Tinkerfont 自体は、あからさまに物議を醸しているわけではありませんが、注目に値するいくつかの種類のリスクがあります。まず、権限の範囲が広くなり、拡張機能アプリケーションは「すべての Web サイト上のデータにアクセス」します。開発者は収集や返送はしないと述べていますが、ローカル優先だからといってリスクがゼロというわけではありません。機密性の高いサイトや内部サイトで使用する場合、ユーザーはこれに注意する必要があります。次に、これは 1 人の個人によって維持される独立したプロジェクトであり、会社からの承認や SLA はありません。 Bunny フォント カタログは、サードパーティのオープンソース フォント ライブラリに依存しています。アップストリームが変更されたり、開発者がメンテナンスを停止したりすると、ツールは徐々に効果がなくなる可能性があります。 3 番目に、リンク (tinkerfont.com/go) を共有するということは、ルールが開発者がホストするショート リンク サービスを経由することを意味します。これはデータの閲覧ではなく単なる設定ですが、プライバシーを重視するユーザーは気にするかもしれません。 4 番目に、カスタム フォントの移行には再アップロードが必要であり、クロスデバイスのワークフローに摩擦が生じます。これは、デバイスを頻繁に変更したり、ブランド フォントを共有したりする必要があるチームにとっては好ましくありません。最後に、これはブラウザ拡張機能のエコシステム内にあり、Chrome と Firefox のストア ポリシーとマニフェスト バージョンの進化がその実装に影響を与える可能性があります。

• 8. 適用可能なグループと使用方法の提案 （全 601 文字）

  誰に適しているか: 納品前にフォントのマッチングを素早く確認したいデザイナー、他の人のコードをレビューするときに「フォントを変更するとどうなるか」を確認したいフロントエンド エンジニア、実際のサイトで読みやすさを調整したい独立系開発者やコンテンツ作成者、DevTools を開きたくないがタイプセットを使いたい人。 「修正前の簡単なガットチェック」や「同僚のために比較写真を撮る」など、短くて素早いシナリオに特に適しています。   適さない人: チーム間でリアルタイムに共同作業してデザイン システム全体を変更する必要がある人。 Safari や Edge などの非公式ブラウザのみを使用している人。クラウド内の同期されたフォント ライブラリを利用するエンタープライズ ユーザーも対象です。これらのシナリオをカバーすることはできません。   代替案: より強力なデザイン システム レベルのフォント管理が必要な場合は、Figma のフォント関連プラグインまたは v0 デザイン システムを検討してください。 「右クリックしてフォントを表示する」という軽量のチェックだけが必要な場合は、Tinkerfont チェッカーのインスピレーションとなっている Fontanello を単独で使用することもできます。アップロードしたフォントをローカルでプレビューすることに重点を置いている場合は、各ブラウザに付属の DevTools レンダリング パネルが最後の手段となります。

• 9. 要約する （全 227 文字）

  Tinkerfont は、制約が少なく、使いやすい、無料のフォント実験ガジェットです。デザイン プラットフォームになろうとするのではなく、ローカル優先、アカウントなし、データ収集なしで、「実際の Web ページでフォントを試す」という高頻度の摩擦を正確に解決します。デザインレビューやフロントエンドのデバッグでフォントに苦労することが多い場合は、インストールする価値があります。チームコラボレーションのバックエンドやクロスブラウザーの対応を期待しないでください。

詳細レポートはまだありません

• 

  09s_w0qdyun

  —

  So convenient! DevTools を開かずにフォントを直接変更でき、その効果を実際の Web ページで即座に確認できるため、時間を大幅に節約でき、デザイン プレビュー ツールになります。

---

• 

  KKing

  —

  初めて使ったときは驚きました。ページ上で直接フォントを変更するのは直感的で効率的です。スクリーンショットを撮って Figma でシミュレーションする必要はありません。実際の環境でスクロールすることでレイアウト効果を確認できるため、前後に切り替える時間を大幅に節約できます。

---

• 

  Christopher.MitchellZ

  —

  デザイナーとして、この拡張機能は Web フォントをテストするための推奨ツールです。右クリックすると現在のフォント情報が表示され、Bunny Fontsのフォントライブラリに直接置き換えることができます。強くお勧めします！

---

• 

  8ebe1b

  —

  もっと多くのフォントソースがサポートされれば素晴らしいと思います。現時点では Bunny Fonts だけで十分ですが、選択肢はまだある程度限られています。

---

• 

  crazyfish897

  —

  クライアントのために Web サイトの再デザインを行う際、これを使用して、ステージング上のすべての候補フォントを直接変更しました。お客様はそれを見ながら選んでいただき、その場でプランを決めていただきました。これにより、スクリーンショット、注釈、改訂、スクリーンショットの無限のサイクルが不要になります。 1時間かかることが10分でできます。

---

• 

  Bruce_Clark_X

  —

  フォントを変更してページを更新しても、設定は保持されます。このセッション間の永続化機能は非常に重要であるため、毎回再構成する必要はありません。 CSSエクスポート機能も便利です。 Tinkerfont でフォントとフォント サイズを調整し、スニペットをエクスポートしてフロントエンドに直接投げました。

---

• 

  AGutierrezK

  —

  以前はフォント情報はFontanelloでしか見ることができず、フォントを変更したい場合は自分でCSSを変更する必要がありました。 Tinkerfont を使用すると、現在使用されているフォントを確認し、ワンクリックで置き換えることができます。検査を右クリックしてパネル スワップを追加すると、1 ステップで完了します。完全に無料で登録も必要ありません。とても良心的です。

---

• 

  TylerHendersonK596

  —

  400 KB 以上の拡張でもこのレベルを達成でき、技術的基盤は良好です。カスタム フォントのアップロードでは、woff2、ttf、otf がサポートされています。テスト ブランド フォントを直接アップロードして、開発や展開を待たずに効果を確認できます。フロントエンドデザイナーは大喜びです。

---

• 

  tedic64

  —

  厳格な CSP 制限のある Web サイトで試してみましたが、うまく機能し、インライン フォントの読み込みも非常にスマートです。ただし、多くの Web コンポーネントを使用する一部のサイトではパフォーマンスが低下し、フォントを変更できません。将来的にはShadow DOMの互換性が最適化されることを期待しています。

---

• 

  Sawyer530

  —

  ページ要素の範囲に応じたフォントの置換をサポートすることは非常に実用的です。ページ全体を置き換えるのではなく、ナビゲーションバーのフォントのみ、またはテキスト領域のみを変更したいと考えています。デバッグ中の精度が大幅に向上し、大きなページが徐々に調整されるシナリオに特に適しています。

---

• 

  Kevin.Ruiz_Max

  —

  構成は、JSON を使用してエクスポートおよびインポートできます。チームの共同作業中に、調整したフォント ルールをチームメイトにエクスポートしました。手動で再構成することなく、別のコンピュータにインポートすることで同じテスト環境を再現できるため、非常に安心です。

---

• 

  Timothy_BaileyII

  —

  ランディング ページの A/B フォント比較テストを行いました。 Tinkerfont を使用して Inter、SF Pro、Noto Sans フォントを切り取り、再度読み込みました。投票のためにスクリーンショットをチームに送信しました。プロセス全体でコードには触れず、効率の向上は少しもありませんでした。

---

• 

  Edward_BakerIII

  —

  典型的な「小さな摩擦を取り除く」タイプのツールで、機能はそれほど優れているわけではありませんが、設計とフロントエンドのコラボレーションの間の問題点を解決します。今では毎日開いている拡張機能です。 Web サイトを見るときは、右クリックしてフォントを調べます。

---

• 

  6m938ys

  —

  ブログのレイアウト フォントを変更するには、フォント パッケージをダウンロードしてローカルにインストールし、CSS を変更してページを更新して効果を確認していました。これで、拡張機能をインストールした後、開発用の CSS スニペットをコピーするだけで試すことができます。プロセスはとてもスムーズです。

---

• 

  EHicks

  —

  公式には、Chrome と Firefox のみがテストされています。他の Chromium ブラウザも理論的には使用できますが、正式にはテストされていません。 Edge での使用には基本的に問題ありませんが、時々、奇妙なレンダリングの違いに遭遇することがあります。もっと多くのブラウザがすぐにサポート リストに追加されることを願っています。

---

• 

  JAedw

  —

  ユーザーデータを収集せず、アカウントを登録する必要もなく、プライバシーの面でも優れています。無料であると主張する多くのブラウザ拡張機能は、バックグラウンドで閲覧履歴を密かに収集します。 Tinkerfont はアカウントなし、データ収集なしと明記されているため、安心して使用できます。

---

• 

  crazydog338

  —

  無料で軽量、すぐに使える Font Playground のコンセプトはよくできています。 WhatFont は認識のみ可能で、Fonts Ninja は登録が必要で、Tinkerfont は敷居がなく、無料でフル機能を備えているため、完全に勝利です。

---

• 

  IShal

  —

  新しいバージョンでは、tinkerfont.com/go の短いリンク共有が追加され、ルールは作成者がホストするリンクに従います。プライバシーにこだわる人は気にするかもしれませんが、これは単なる設定であり、データの閲覧ではありません。

---

• 

  xkn8f

  —

  DOM スキャン機能は、ページ上で使用されているすべてのフォントとその使用回数をリストします。競合製品分析を行う場合、競合他社の Web サイトでどのようなフォントの組み合わせが使用されているかを一目で知ることができます。これにより、肉眼での判断やソースコードのチェックにかかる時間を大幅に節約できます。デザイナーにとっては強力なツールです。

---

• 

  Angela_CarterX

  —

  Bunny Fontsには1900以上のスタイルがあり、自由に変更できます。オープンソースのフォント ライブラリは、しばらく遊んでみるのに十分です。

---

• 

  Joshua.Brooks520

  —

  6月30日にProduct Huntに投稿され、その日のうちに140票を集めて特集されました。独立した開発者が単独でそれを行うのは簡単ではありません。多くの機能はありませんが、デザインとフロントエンドのコラボレーションの間のギャップにちょうど当てはまります。 「昔誰かが作っていたはず」のようなガジェットです。

---

• 

  MPatel_2023

  —

  有効なルールから CSS フラグメントを直接コピーする機能は、非常に簡単に提供できます。調整後、コードは開発に直接引き渡されます。

---

• 

  KAmey

  —

  範囲をナビゲーション バーやテーブルなどの機能に制限することは、サイト全体に適用するよりも実用的であり、ローカル レイアウトの変更に使用できます。

---

• 

  Christine770

  —

  設置してみると、とても良い香りがします。

---

• 

  LaurenRichter

  —

  ローカル ストレージ、ゼロ アカウント、ゼロ データ収集は、ログインを必要とする大量のジャンク拡張機能よりもはるかに快適です。

---

• 

  YieldFavmer817

  —

  これは、ブランド仕様を実装するときに使用するのが最も便利です。顧客が提供したフォントをアップロードし、公式 Web サイトで実際の効果を直接確認できます。これは、Figma でブラインド調整するよりもはるかに正確です。ただし、chrome://や拡張機能ストア自体は実行できないので注意してください。

---

• 

  Kimberly.Lopez

  —

  これは、会社の承認なしに 1 人の個人によって維持されている独立したプロジェクトです。一日更新しないのは正常です。大切に使ってください。

---

• 

  梅花634

  —

  5.0 点ですが、レビューが少なすぎて参照の重要性が限られています。

---

• 

  NDiaz

  —

  カスタム フォントは再アップロードする必要があります。この移行エクスペリエンスは少し荒いですが、JSON ルールを取り除くことができます。

---

• 

  JessicaGomez65

  —

  ページをめくった後に SPA が失われないことが重要です。以前は他の拡張機能を使っていたのですが、ナビゲーションや遅延読み込みのコンテンツが出てくると、設定していたフォントがリセットされてしまい、毎回最初からやり直す必要がありました。 Tinkerfont は MutationObserver を使用して、DOM が変更されたときに有効なルールを再適用します。エクスペリエンスがはるかにスムーズになり、長いページレビューを行う際の心配がなくなりました。

レビューはまだありません