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.
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:
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:
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
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.
Please keep reviews clean, avoid improper language, and do not post any personal information. Also, please consider sharing your valuable input on the official store.
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.