Why does the Font Finder extension show a list of fonts instead of a single rendered font in versions greater or equal to 0.3.0?

The Font Finder extension evaluates every character in the selected text node to determine the actual font rendered by the browser for that specific character (Starting from version 0.3.0). The extension includes a predefined set of system fonts recognized by modern browsers to minimize incorrect font detection. This method is used because a block of characters may be displayed using different font families. The extension lists the percentage of each used font family next to the rendered fonts.

To use this tool correctly, select some content from the page and then call the analyzer. This tool will only evaluate the first 100 characters in the node if no selection is detected. Keep in mind that version 0.3.0 requires a more intensive inspection and is therefore slower than older versions, but the report is more accurate. The Font Finder extension does not affect browser performance unless a user-requested job is in progress since it uses a non-persistent background page.

What does the "This is a complex node" analyzer warning mean?

When using the inspection tool to select a node, there may be child nodes within that node, each with its font attribute. The extension displays the warning "This is a complex node" to indicate that selecting a node without child nodes will result in a more accurate analysis. To precisely determine the font family of a character, select it using your mouse, then use the right-click context menu to call the tool. This way, the extension only examines the selection rather than all the characters within the node element.

[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.

What is the Font Finder extension?

This extension allows you to analyze complete CSS font information of an HTML element and make non-destructive edits to those specifications, allowing you to envision your website with a different font style.

What's new in this version?

Please check the Logs section.

How can I access the Font Finder window through the action button (toolbar button)?

Upon installation, Font Finder adds an action button that can be clicked to activate the extension and inspect the node elements on the page. Alternatively, you can select text on the page and use the right-click context menu to open the font analyzing window. To exit the inspection mode, press the ESC key on your keyboard.

To add a keyboard shortcut to activate the Font Finder extension instead of clicking the toolbar button, you can follow these steps:

• Open the Chrome menu and select "Settings."
• Click "Extensions" in the left-hand menu.
• Scroll down and click the "Keyboard shortcuts" link at the bottom of the page.
• Find the Font Finder extension in the list and click the "Set up keyboard shortcuts" button next to it.
• Press the keys you want to use as the keyboard shortcut to activate the extension (e.g., Ctrl + Shift + F).
• Click "OK" to save your keyboard shortcut.

Once you have set up your keyboard shortcut, you can activate the Font Finder extension from anywhere in your browser!

How can I use Font Finder's analyzing tool?

To activate the Font Finder analyzing tool, click on its icon placed in the toolbar area of your browser. Upon activation, the icon's white background will change to orange to indicate inspection mode is ready. Once the extension is in inspection mode, click on an element within the current page to view the font details in a new window.

[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.

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

Can I view a list of all the fonts used on the current page using this extension?

Starting from version 0.2.0, you can use a new context menu item for page context to gather all the fonts in the current frame. It's important to note that this feature only examines the fonts inside the current frame. If the page contains multiple subframes and you click on the top one, the fonts used inside the subframes will not be detected.

How can I temporarily change an element's font to see how it would look?

To temporarily replace the element's font and view how it would appear, begin by selecting the text. Then, right-click to access the context menu and select the option to replace the font with a new one. By default, the prompt will display the list of original fonts for this element.

How can I display the analyzing window without it opening as a separate window?

Starting from version 0.2.1, you can right-click the action button to access context menu items that allow you to change the window opening mode to embedded mode. This mode can be helpful if you are browsing in full-screen mode, as it will prevent the analyzing window from opening as a separate window.

Can Font Finder distinguish between locally loaded and remotely loaded fonts?

Starting from version 0.3.4, Font Finder can identify whether a font is loaded locally or remotely. The extension displays "local" or "remote" keywords next to the rendered fonts. If a font is loaded using the @font-face CSS rule or by JavaScript's document.fonts.load method, it will be tagged as remote. Otherwise, it will be tagged as local. However, note that the actual origin or source of the font cannot be displayed for privacy reasons.

Local fonts refer to fonts that are installed on the device or computer that you are currently using. These fonts are stored locally and can be accessed and used by any application on that device.

On the other hand, remote fonts are hosted on a server or a cloud-based platform and are not stored on the user's device. Remote fonts can be accessed and used by websites by loading the font files from the server where they are hosted.

Is it possible to identify fonts on a page without using the Font Finder extension?

While it may be cumbersome, it is still possible to identify fonts using the DevTools in your browser. You can refer to the blog post titled "How to Identify Fonts On Any Webpage Without Having To Use An Extension In Firefox And Chrome" for more information on the process.