Identify fonts on websites with Fonts Ninja

Tool powered by Fonts Ninja on fonts.ninja.

Fonts Ninja on fonts.ninja: identify fonts on live websites, browse font specimen pages, install the browser extension. Embed the font identifier.

What is Fonts Ninja?

Fonts Ninja (fonts.ninja) helps you identify fonts used on live websites—often via a browser extension—and browse specimen pages at URLs like fonts.ninja/font/[family-name]. Designers use it when auditing competitors, rebuilding typography, or matching a reference from a landing page. The publisher does not run font detection in the iframe; use the publisher extension on pages you are allowed to analyze.

What fonts.ninja offers

Font identifier for live websites—extension inspection, specimen pages, and competitor typography research.

  1. Identify fonts on websites: Point the font identifier at a live page to see family names, weights, and stack hints—“what font is this?”

  2. Font identifier extension: Install the browser tool from fonts.ninja for full extension flows on pages you may analyze.

  3. Font specimen pages: Land on /font/… URLs for named families (Urbanist, Roobert, display cuts) with foundry metadata.

  4. Competitor typography research: Document what shipped on marketing sites before you propose a new type system or redesign match.

  5. Style details for handoff: Weights, sizes, and stack clues—names alone are not a license.

  6. License is separate: Identification does not grant usage rights—purchase or embed per foundry terms.

How to use Fonts Ninja

From site visit to matched fonts for redesign—inspect, log, verify.

  1. Open fonts.ninja

    Use the iframe or open the site in a new tab for downloads.

  2. Install the extension if needed

    Follow publisher docs; review permissions before analyzing third-party pages.

  3. Inspect your target page

    Run identification on a page you are allowed to study.

  4. Log families and services

    Note webfont hosts and fallback stacks for dev handoff.

  5. Verify in design tools

    Match weight and width in Figma—live CSS can differ from static mocks.

  6. Pair with font tools

    After you name a face, browse `/fontjoy` for pairs or `/dafont` for free alternatives.

Tips for font identification

Names are a start, not permission to ship.
  • 01

    Confirm with a specimen

    Open the foundry or Google Fonts page for weights and language coverage.

  • 02

    Watch custom subsets

    Logos may use altered cuts that do not map to a retail file.

  • 03

    Document sources

    Save purchase links so design and legal share one truth.

  • 04

    Respect privacy and terms

    Only analyze pages you are permitted to inspect.

Who this is for

Typical Fonts Ninja workflows.

  1. Designers and art directors: Name faces when moodboarding from live references.

  2. Developers: Trace font-family stacks during implementation reviews.

  3. UX and competitive research: Capture typography decisions when benchmarking products.

  4. Students: Learn by inspecting professional sites.

Why open Fonts Ninja

Official site in your font toolkit.

  • Stable directory path

    Link `/fonts-ninja` in research notes and handoffs.

  • Font tools category

    Listed with pairing, foundries, and download utilities.

  • The publisher does not run detection

    Inspection and extensions stay on fonts.ninja.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.