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

  1. In version greater or equal to 0.3.0, Font Finder extension displays a list of fonts as the rendered ones. Why don't I get a single rendered font anymore?

    From version 0.3.0, Font Finder analyzes every single character inside the selected node and evaluates the actual font that is rendered by your browser for this particular character. During the evaluation, the extension includes a predefined set of system fonts that are usually known to all modern browsers to eliminate wrong font detection as much as possible when a requested font family is not available on a system and hence your browser has already used one of the default fonts as the replacement. So when a block of characters is explained, there is a chance that your browser uses different font-families to display the entire array. Note that the Font Finder extension now displays the percentage of each used font-family next to the rendered fonts. To get a more accurate result. It is recommended to select a text and then call the analyzing tool. If no selection is detected, only the first 100 characters in the selected node are going to be evaluated. Also, note that version 0.3.0 needs to perform a pretty heavy examination and it is definitely slower than older versions but the report is more accurate. Like the previous versions, this extension uses non-persistent background page and hence does not affect your browser performance at all unless actually performing a user-requested job.

  2. What is the meaning of "This is a complex node" in the analyzing tool?

    If you are using the inspection tool to select a node, there is a chance that the node has child nodes of itself and each child node may have its own font attribute. This is a warning to inform you that to get a more accurate result you need to select a node that does not have child nodes. To accurately get the font-family of a character, you can simply select the character with your mouse and then use the right-click context menu to call the tool. This way only the selected character is going to be examined not all the characters inside the node element

  3. [Firefox Only] Is the FontFinder extension multi-process (e10s) compatible?

    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.

  4. What is the Font Finder extension?

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

  5. What's new in this version?

    Please check the Logs section.

  6. How can I access to the Font Finder's window from the toolbar button?

    Font Finder installs a toolbar button on the first run. When this button is pressed, the Font Finder extension inspects the next element on the page that is clicked. You can alternatively select a text in the page and then use the right-click context menu to bring the font analyzing window up. To cancel the inspection mode, press the ESC key on your keyboard.

  7. How can I use Font Finder's analyzing tool?

    To deploy the Font Finder analyzing tool, click its icon on the toolbar area of your browser. When it is activated, the icon's white background will change to orange to indicate the inspection mode is ready. Once the extension is in the inspection mode, click on an element inside the current page to see the font details in a new window.

  8. [XUL Version Only] Is it possible to adjust Font details with the Font Finder extension?

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

  9. What are the main features of Font Finder extension (some features are only available in the XUL version)?

    Any of the following options can be quickly accessed by highlighting a text, or by pressing the toolbar button to switch to the inspection mode:

    • Font color (RGB and HEX)
    • Background color (RGB and HEX)
    • Font family (including actual font being rendered by your browser!)
    • Font size in pixels
    • Line-height, vertical-align, letter, and word-spacing
    • Font-weight, style, and variant
    • Text-transform, decoration, align, and indent
    • Element’s type, class, and ID

  10. Is it possible to see the list of all the fonts that are used in the current page?

    As of version 0.2.0, there is a new context menu item for page context to gather all the used fonts inside the current frame. Note that this item only examines the fonts inside the current frame, so if the page has multiple subframes and you are clicking on the top frame, the fonts that are used inside the frames are not being detected.

  11. Can I temporarily replace the font of an element to see the change in appearance?

    First select the text and then use the right-click context menu item to replace the font with a new one. When the prompt is opened, by default it has the list of the fonts that are using for this element originally.

  12. Can I open the analyzing window in the embedded mode so that there is no separate window?

    As of version 0.2.1, it is possible to use the right-click context menu items over the toolbar button to change the window opening mode to embedded mode. This mode is useful if you are browsing in the full-screen mode for instance.

Matched Content

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

What's new in this version

Version--
Published--/--/--
Change Logs:
    Last 10 commits on GitHub

    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.

    issuesstarsforks

    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.

    Recent Blog Posts on add0n.com