An extention to show/inspect and analyze fonts in web-pages, on single element or the whole document.

Latest Version

Version
5.0.1
Update
September 4, 2024
Size
103KiB
Developer
Category
Users
10,000+
Rating
4.43478 ★
Manifest Version
3
Web Store Status
Languages Support
English
Italiano
See more
Permissions
Storage
ContextMenus
See more

fonts infos Extension

An extension to show/inspect text fonts in webpages.

NOTE: On first installation, reload the already opened tabs if it's not working.
On chrome web store pages it's not working or is blocked by them.

Show in page the following informations:
* font size;
* font weight;
* font main family;
* font style;
* font color;
* line height;
* font decoration;
* font transformation;
* letter spacing;

Switch between hex and rgb colors from the dedicated option page or the popup!
Right-click contextual menu!
An option to hide contextual menu!
An option to show on mouse-over all the infos on the font or single info.


For any problem or bug open a ticket on the support tab, i will answer as soon as possible.


====Possible problem====
On first installation, RELOAD the already opened tabs if it's not working.
On chrome web store pages it's not working or is blocked for some reason.

Case not on hover:
* If text is inside nested overflow:hidden element the popup will be hidden
* If your element have some overflow this pugin will override them with overflow:visible than it will revert them when turn off.
* If there are async element you should re-launch.


====Change Log====
* 5.0.0 : move to manifesto v.3 and code related to v.3, add switch between rgb and hex colors
* 4.0.0 : review graphics, removed contextual menu \"showAlways\", now on click the popup will appear, and add option page to toggle contextual
* 3.0.0 : Restyle and code refactoring, add some other option and right-click menu single info
* 2.0.0 : Add right-click contextual menu that will show all fonts info on mouse hover, add option to prevent click to the left-click, clicking a text save the info on a right panel if \"select on click\" is enabled, add letter spacing to the list
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "author": "Paris", "background": { "service_worker": "background.js" }, "action": { "default_icon": "images/icon.png", "default_popup": "popup/popup.html", "default_title": "Show this page's fonts infos." }, "content_scripts": [ { "js": [ "jquery-3.6.3.min.js", "font.js", "fontAll.js", "removeFont.js", "foreground.js" ], "matches": [ "http://*/*", "https://*/*" ] } ], "default_locale": "en", "description": "__MSG_appDesc__", "icons": { "16": "images/icon.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "manifest_version": 3, "name": "__MSG_appName__", "offline_enabled": true, "options_page": "options/options.html", "permissions": [ "storage", "contextMenus" ], "short_name": "font-inspector", "version": "5.0.1"}
Read more

How to download and manually install fonts infos extension for Chrome

Looking for a way to install fonts infos extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install fonts infos extensions manually, this article outlines two simple methods to effortlessly install fonts infos extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download fonts infos extension and manually install through Drag &Drop

If you ever need to manually install a fonts infos extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the fonts infos Extension by clicking the "Download CRX" button on the website.

Look for the fonts infos extension you wish to install. Go to the website and download the fonts infos extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for fonts infos extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the fonts infos extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download fonts infos extension for Chrome and install in Developer Mode

This is another method to install fonts infos extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the fonts infos extension file

Select and download the fonts infos extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the fonts infos extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your fonts infos extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the fonts infos extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install fonts infos extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

FontScanner - Scan for font family names Extension · Developer Tools 10,000+ 9 ★ 47.22KiB

icon

Font Finder Extension · Developer Tools 10,000+ 185 ★ 159KiB

icon

Dimensions Extension · Developer Tools 10,000+ 454 ★ 17.28KiB

icon

Which Font Is This? Extension · Developer Tools 10,000+ 11 ★ 549KiB

icon

Fonts Ninja Extension · Productivity 10,000+ 696 ★ 1.72MiB

icon

Font Style Extension · Accessibility 10,000+ 9 ★ 14.53KiB

icon

Page Ruler Extension · Productivity 10,000+ 83 ★ 256KiB

icon

Font Picker Extension · Developer Tools 10,000+ 57 ★ 358KiB

icon

Measuremate Extension · Developer Tools 10,000+ 42 ★ 797KiB

icon

Font Finder Extension · Developer Tools 10,000+ 7 ★ 82.12KiB

icon

Font Inspector Extension · Developer Tools 10,000+ 7 ★ 30.26KiB

icon

Grid Ruler Extension · Developer Tools 10,000+ 335 ★ 288KiB

icon

A+ FontSize Changer Extension · Productivity 10,000+ 92 ★ 108KiB

icon

CSSViewer Extension · Developer Tools 10,000+ 371 ★ 301KiB

icon

1px: Simple ruler Extension · Productivity 10,000+ 9 ★ 22.13KiB

icon

Font Finder Extension · Productivity 10,000+ 261 ★ 540KiB

icon

Google Font Previewer for Chrome Extension · Developer Tools 10,000+ 265 ★ 45.88KiB

icon

What Font - font finder Extension · Productivity 10,000+ 249 ★ 161KiB

icon

Measure-it Extension · Developer Tools 10,000+ 40 ★ 15.63KiB

icon

Fontanello Extension · Developer Tools 10,000+ 45 ★ 16.02KiB

icon

Better Ruler Extension · Developer Tools 10,000+ 52 ★ 93.66KiB

icon

Fontpair Extension · Productivity 10,000+ 4 ★ 445KiB

icon

WhatFont Extension · Developer Tools 10,000+ 2007 ★ 741KiB

icon

Designer Tools Extension · Developer Tools 10,000+ 227 ★ 987KiB

User reviews

icon

Sblue Web Studio (ID: 00000089ab78755c) Voted 5 ★ - Updated 07/31/2023 This extension is way better compare to Whatfont and fonts Ninja. I would like to thank the genius developer who created this plugin.

icon

Di chen (ID: 000000de062a8fba) Voted 3 ★ - Updated 11/25/2021 字体设置单位为 rem 或者 em 的时候这个插件显示的是 px 就有点乱了

icon

divya suri (ID: 0000009ea41015ac) Voted 5 ★ - Updated 05/14/2021 Amazing Extension!!

icon

Geek (ID: 000000275e02cc1a) Voted 5 ★ - Updated 12/03/2020 exactly what I'm looking for, thanks!

icon

bissy bissy (ID: 0000001edc6856e8) Voted 5 ★ - Updated 07/07/2020 So Useful!!