Onylogy Font Checker

Onylogy Font Checker is the fastest way to identify a font on any website and capture its full typography system as developer-ready tokens — free, open source, and built with care under the Onylogy Studio banner by Ehasanul Haque. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT IT DOES Hover any text on a web page to see its exact font: family, weight, size, line height, letter spacing, color, and text transform — all in a frosted-glass card that follows your cursor. Click any text to pin a full data card right next to that element. Pin as many as you like. Scroll the page and the pinned cards scroll with the content where you placed them. Open the popup to: • Identify what Google Font, Adobe Font, or self-hosted font a site uses • Scan the entire page's typography hierarchy in one click (H1–H6, body, button, link, caption, blockquote) • Detect the modular scale ratio behind the type sizes (major-third, perfect-fourth, golden ratio, and more) • Run eight readability checks against WCAG and the established typographic baselines • Export the captured system to CSS variables, Tailwind config, SCSS, JSON, WordPress Kadence Global Typography, or responsive clamp() ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHY INSTALL IT • IDENTIFY FONTS INSTANTLY. No more guessing or opening DevTools. Hover any text — the font family appears in 1:1 cursor-follow speed. • PIN MULTIPLE CARDS AT ONCE. Inspect a heading, the body copy, the button, and the caption side by side without losing context. Pinned cards stay anchored to the page where you placed them. • DETECT THE FONT SOURCE. Google Fonts, Adobe Fonts (Typekit), self-hosted, system fonts, and variable fonts are all classified automatically. Variable font axes are surfaced too. • EXPORT THE WHOLE SYSTEM. Most tools tell you one family and stop. Onylogy Font Checker generates ready-to-paste tokens for your stack: – CSS variables (with line height, weight, letter spacing) – Tailwind theme.extend.fontSize + fontFamily – SCSS variables – Design-token JSON (Style Dictionary compatible) – WordPress Kadence Global Typography – Responsive clamp() that fluidly scales between 320px and 1440px • CHECK READABILITY. Eight automated checks for body size, caption size, line height, line length (45-75 char measure), uppercase letter spacing, WCAG contrast (AA normal + large), and thin weights at small sizes. Animated score donut (0-100) plus a filterable list of every issue. • KEYBOARD-FIRST. Alt+Shift+F starts inspect on any tab from anywhere in the browser (re-mappable). Esc exits cleanly and clears pinned cards. Press I, T, E, or 1-4 in the popup for instant tab switching. • PRIVATE BY DEFAULT. No accounts, no analytics, no network calls. Permissions are only activeTab + scripting + storage. All preferences live in chrome.storage.local. Open source under MIT. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR • WORDPRESS DESIGNERS AND DEVELOPERS working with Gutenberg, Kadence, or any block theme who need fast typography inspection without opening DevTools, plus a Kadence-native export. • FRONTEND DEVELOPERS building design systems who want to capture a site's type scale into CSS variables, Tailwind, SCSS, or JSON tokens in one click. • UI AND UX DESIGNERS auditing typography hierarchy, readability, and font usage on competitor sites or their own work. • ACCESSIBILITY SPECIALISTS checking body font size, line height, line length, color contrast, and uppercase letter spacing against WCAG and Bringhurst baselines. • EDUCATORS, WRITERS, AND CURIOUS READERS who want to identify the fonts behind a site they love. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT MAKES IT DIFFERENT Most "what font is this" extensions tell you the family and stop. Onylogy Font Checker is built around three ideas the existing tools miss: 1. PIN MULTIPLE CARDS. Inspect every typographic role on a page at once, in context, without losing your place. 2. ANCHOR TO THE DOCUMENT, NOT THE SCREEN. Pinned cards scroll with the page they were pinned on — exactly where you clicked, every time you scroll back to that element. 3. EXPORT THE WHOLE SYSTEM. Six developer-ready formats, including responsive clamp() and WordPress Kadence Global Typography. Plus a clean light-mode-by-default UI, AA-verified contrast in both themes, Bricolage Grotesque display type, Montserrat body, and a brand-blue (#004BD1) accent. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS Alt+Shift+F Toggle inspect mode on any tab (re-mappable at chrome://extensions/shortcuts) I Toggle inspect (in popup) T Toggle light / dark theme E Jump to Export tab 1 / 2 / 3 / 4 Switch tabs (Inspect / Hierarchy / A11y / Export) Esc Exit inspect and clear pinned cards ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY • No data collection of any kind. • No network requests from extension code (the only external request is the browser loading Google Fonts for the overlay UI itself). • No analytics, no telemetry, no third-party SDKs. • All preferences live locally in chrome.storage.local. Full privacy policy: https://github.com/ehasan28 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OPEN SOURCE MIT-licensed. The full source code is published on GitHub. Issues and feature requests welcome. Repository: https://github.com/ehasan28 Author: Ehasanul Haque Studio: Onylogy Studio If this tool saves you time, please leave a review on the Chrome Web Store — every star helps another designer or developer find it. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VERSION 0.2.0 • Light / dark theme toggle (light by default). • Pin-on-click cards that scroll with the page content. • Compact hover tooltip wi…