Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

tool · one of 34 free, no counter

Fonts

What would this page look like in a different typeface?

Choosing a typeface from a specimen is choosing it against a pangram at 72px, which tells you almost nothing about how it sets at 15px in a paragraph on this page. This lists what the page is using - ranked by how much of it there is - and then puts a candidate onto the live document so the decision is made against real copy.

Reach it Press ⌘ + K on any tab and type fonts. Ctrl + K on Windows and Linux

Tries a different typeface on a page you did not build
reads computed styles across the document
writes a style override, removed when cleared
sends nothing
ranks families by how much text uses them
metrics an empty value means "leave it alone"
scope a selector you choose, defaulting to the body
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · free, no counter

section#about

What this actually is

While choosing a face, and when auditing a site that has quietly accumulated six of them. The ranking is the useful half there: a family used on one label is a different problem from one used on every heading.

section#asked

Asked about this tool

Can I try a font that is not installed?

Only if the page can already load it. The override writes a family name into a declaration; it never fetches a font file, because a remote font URL from an extension is a request the page never made.

Why does an empty metric field not mean zero?

Because zero is a value and "leave it alone" is not. A blank letter-spacing keeps whatever the page has, which is what you want while changing only the family.

What happens to my override on reload?

It goes. Every edit here is ephemeral by contract - applied to the live DOM, never persisted, never transmitted.

Is this the same as Font loading?

No. This one is about choosing a face. Font loading is a diagnostic about which declared faces actually arrived, and Font faces lists the @font-face rules themselves.

how to use fonts

  1. Open Fonts and read the families ranked by how much of the page's text uses each.
  2. Choose the scope - a selector of your own, or the body by default.
  3. Apply a candidate and read it at real sizes in real paragraphs, not against a pangram at 72px.
  4. Clear the override. It is a style patch, and nothing on the page was saved.

written about at length

Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits