Bookmarklet
Brand Extractor Bookmarklet
Extract fonts and colors from any website with one click. The bookmarklet runs entirely in your browser. It reads the computed styles of the page you are on, lists the font families, sizes, and colors in use, and sends nothing to a server.
- 1Drag this link to your browser bookmarks bar: Extract fonts(drag to bookmarks bar)
- 2Open any website you want to inspect.
- 3Click the bookmarklet. A panel appears on the page showing detected fonts and colors.
- 4Copy any font name or color value to your clipboard.
If your bookmarks bar is hidden, show it first. In Chrome: View > Always Show Bookmarks Bar. In Firefox: right-click the toolbar and check Bookmarks Toolbar.
What the Bookmarklet Extracts
Every font family used on the page, with the element it appears on and the computed font size and weight.
Text colors, background colors, and border colors, deduplicated and sorted by frequency. Each shown as HEX.
Everything runs in your browser. No URL is sent to a server. No screenshot is uploaded. Close the panel and the data is gone.
How It Works
The bookmarklet is a small JavaScript snippet that runs on the current page. It walks the DOM, reads the computed style of each visible element with getComputedStyle, and collects the font family, font size, font weight, text color, background color, and border color.
It deduplicates the results: font families are reduced to the first declared family (the actual rendered font, not the fallback stack), and colors are rounded to the nearest hex value to collapse near-duplicates. The result is a panel overlaid on the page showing the detected fonts and colors, with copy buttons for each value.
This is a deterministic, client-side extraction. It does not call any external service. It does not store anything. It works on any website that allows inline scripts (some sites with strict Content Security Policy may block it, in which case nothing happens).
Why a Bookmarklet Instead of a Server
A server-based brand extractor has to fetch the target website, parse its HTML and CSS, and return the results. That approach has three problems. First, it requires a server, which breaks the static-only architecture of Font Blend. Second, it creates a SSRF (Server-Side Request Forgery) risk that has to be carefully mitigated. Third, the server sees the URLs you inspect, which is a privacy concern.
The bookmarklet avoids all three. The browser already has the page loaded, so there is no fetching. The browser's same-origin policy means the script runs with the user's permissions on the page they are already viewing. And the URL never leaves the browser, because there is no server to send it to.
The tradeoff is that the bookmarklet only works on pages the user can view in their browser. It cannot inspect pages behind authentication that the browser is not logged into, and it cannot inspect pages with a strict CSP that blocks inline scripts. For most public websites, it works fine.
What to Do with the Results
Once you have extracted a font or color from a site, bring it into Font Blend to test it, pair it, and export production code.