Font Finder
FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page
Download Links
Advertisement
Font Finder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform in-line replacements to test new layouts.
image

Features

FAQ

  1. Is FontFinder extension multi-process (e10s) compatible (Firefox only question)?

    The old FontFinder extension is not e10s compatible and it will not be. However, my new implementation of this extension is e10s compatible. Give the new Font Finder extension a try.

  2. What is Fond Finder extension?

    This add-on lets you analyze the full CSS font detail for an element and modify those specifications as non-destructive edits, helping you conceptualize your site with a different font presence.

  3. What's new in this version?

    Please check the Logs section.

  4. Can I access to the Fond Finder's features from a toolbar button?

    Yes, Font Finder installs a toolbar button on first run, however by default the button is not visible. If you want to add the button to the toolbar, simply right click on the toolbar and select "Customize ..." item. Find the button and drop it to the toolbar.

  5. How can I use Font Finder's analysis tool?

    To deploy the Font Finder analysis tool, click its icon on the taskbar. When it is activated, the icon's white background will change to orange to indicate its ready status. Once the analysis tool is hot, click an element of a page to see the font details, as shown below in the example for the headline.

  6. Is it possible to adjusting Font detail with Font Finder extension?

    To modify any of the font styles, first right click to open the context menu. Then, from the FontFinder options, select the action that you wish to take.

  7. What are the main features of Font Finder extension?

    Any of these options can be quickly accessed through highlight & right-click, or through the use of toggling the icon in the statusbar (which makes it easy to analyze fonts before a :focus action occurs, such as input fields or links).

    1. Information Captured

    2. Font color (rgb and hex)

    3. Background color (rgb and hex)

    4. Font family (including actual font being rendered!)

    5. Font size

    6. Line-height, vertical-align, letter and word spacing

    7. Font weight, style, variant

    8. Text transform, decoration, align and indent

    9. Element's type, class and ID

Reviews

Please keep reviews clean, avoid the use of improper language and do not post any personal information.HTML tags
  • <a> Defines an anchor.

    Example: <a href="http://add0n.com">a sample link</a>

  • <pre><code> Syntax Highlighting (Supported languages: Bash, JSON, HTML, JavaScript, and CSS).

    Example: <pre><code class="javascript">var foo = 'bar';</code></pre>

  • <strong> Defines bold text
  • <blockquote> Defines a long quotation
  • <caption> Defines a table caption
  • <cite> Defines a citation
  • <em> Defines italic text
  • <p> Defines a paragraph
  • <span> Defines a section in a document
  • <s> Defines strikethrough text
  • <strike> Defines strikethrough text
  • <u> Defines underlined text
  • <br> Defines a single line break; can be used alone and don't need an ending tag

Editorial Review

If you are a designer, developer or professional typographer you may have been browsing the web at one point or another and wanted to know what a particular font on a webpage might be. Rather than having to seek out the information for yourself or take screenshots into photoshop or indesign it's now possible to have a full-featured tool for font analysis even in your browser and completely for free.

Font Finder is a tool that analyzes the font information of any font that you happen to find on a webpage. You can quickly access all of the analysis features by simply highlighting and right clicking an item or through the toolbar icon as well. The toolbar icon instantly analyzes fonts through an action focus pop-up window. This means you can receive alerts through input fields are links whenever you visit a new page.

Font analysis goes far beyond simply naming the font family. With detailed analysis from the application you can receive the RGB and hex code for the color, the background color, the family that the font comes from, the actual font size as well as information about the alignment. Details go even further to start naming element type, class, ID as well as some of the previous decoration, transformations, weights and variants on the font. This means that no matter what type of editing has been done to a font design you can replicate the same results with your own development as well as experiment with slight variations for your own needs. By copying font information to clipboard you can provide instant in-line replacements as well as test new font layouts for your websites and projects. Font finder really is the ultimate tool for designers and typographers. If you have ever thought about the fonts you see on your favorite webpages every day this is an easy way to replicate the style with minimal effort.

What's new in this version


Change Logs:

    Explore more

    Need help?

    If you have questions about the extension, or ideas on how to improve it, please post them on the support site. Don't forget to search through the bug reports first as most likely your question/bug report has already been reported or there is a workaround posted for it.

    Open IssuesIssuesForks

    Recent Blog Posts on add0n.com