If you’ve ever been working on a project or a paper and wondered what font was being used on a website, you’re not alone.
Most of us have found ourselves wanting to know what font was being used on a website at some point in time, whether it’s because we’re trying to match the font of something we’re writing to the tone of the site, or because we just think it’s an awesome font and want to use it for our own purposes.
The problem is, there aren’t that many tools available for identifying fonts. So I set out to make my own!
Meet FONTIFY: a Chrome extension that tells you what font is being used anywhere on the web! It’s super easy to use—and now free!
Chrome Extension For Identifying Fonts
We daily come across hundreds of different fonts on the internet. Some even catch our eyes, and we want to use it on our own website. But for that, first, we have to identify its fonts. Obviously, our bare eyes will not do that, so a font identifier is needed.
The best part of the Google Chrome web browser is it supports extensions. These handy tools are much helpful for various purposes. For example, if you are a web developer, then Chrome’s font identification extension will be of great use as it will give you details of font styles used on a web page.
There are plenty of font identification Chrome extensions available to download. Some of them can even identify plugins and themes embedded in a site. Our list has some such fantastic Chrome extensions that you can use.
Also Read- How To Install Fonts on Windows 11
Contents:
List of Best Chrome Extensions To Identify Fonts
- WhatFont
- Font Finder
- FontScanner
- Style Scout
- Font Picker
- Fontanello
- WhatRuns
- WhatFontIs
List of Best Chrome Extensions To Identify Fonts
WhatFont
Font Finder
FontScanner
Style Scout
Font Picker
Fontanello
WhatRuns
WhatFontIs - WhatFont
WhatFontIt is a versatile Chrome extension that will help you identify and explore fonts on a website. You can then avail the identified fonts directly from WhatFont or bookmark them for later use. Web developers widely use the extension to incorporate fonts in their works.
WhatFont shows you several designs, sources from where you can buy them, and their uses for a specific font. It has its own proprietary algorithm to detect the font style accurately. The operating speed of the extension will also amaze you.
Download
- Font Finder
Font FinderThis easy-to-use Chrome extension conveniently detects fonts used on a web page. Font Finder searches the font style, size, color, and other details in an easy-to-digest format. You just have to right-click on the extension to get all the details.
Font Finder also shows the CSS code embedded in the font. After knowing every detail of a font, users can buy it from any third-party source they want. All over, it is a convenient tool for entry-level web developers.
Download
- FontScanner
FontScannerIf you are looking for a lightweight font identifier extension, then FontScanner will help you out. The unique extension accurately detects the fonts used in a site. Moreover, you can copy a text and paste it on FontScanner to get font details.
The process of using the Font Scanner is also easy to perform as you only have to right-click on the text keeping the extension on. A pop-up will appear on the screen with all the necessary details of the font used. In addition, the method is lightning fast.
Download
- Style Scout
Style ScoutStyle Scout is an unfamous font identifier extension with unique algorithms to identify the font. The best part of Style Scout is checking the font used in images. In addition, you can get the fonts from the website directly with the help of the extension.
You will get various details of the fonts on the extension, font size, color code, and CSS code embedded in it. And to get all this, click on the extension and point your cursor on a word. The resulting pop-up will have all the necessary info.
Download
- Font Picker
Font PickerWith over 30 thousand downloads, Font Picker is another option to choose as a Chrome extension for identifying fonts. The USP of Font Picker is speed and accuracy. You can get the details of the font used on a web page by clicking on a word.
Another feature of Font Picker is a multiple font identifier that lets you identify all the fonts used on a site by dragging your mouse pointer over the page. Identified fonts can be bookmarked or bought from the source given in Font Picker.
Download
- Fontanello
FontanelloIt is one of the most advanced tools to identify fonts on web pages. Fontanello was initially developed to help professional web developers, but now normal users can also use the extension for their purpose. The extension shows a detailed overview of fonts used in the text.
Fontanello has a fantastic feature of replacing the font of a live website for review purposes. This makes it easy for web developers to use existing sites as a prototype. So one can choose Fontanello as their font identifier.
Download
- WhatRuns
WhatRunsOur following inclusion is not just a font identifier from extension but an all-in-one tool for web development. WhatRuns offers some unique features like identifying fonts, themes, plugins, and other technologies used on a website. You can directly get the technologies from WhatRuns’s provided source.
Another amazing aspect of WhatRuns is that you can also follow a website to get alerts about recent changes done in Technologies. Many professional web developers use this amazing tool, and you can also use it.
Download
- WhatFontIs
WhatFontIsWhatFontIs is another Chrome extension for identifying fonts online. The best part of WhatFontIs is that you can identify fonts used on images. This feature makes it more versatile than other font identifiers.
The using procedure of WhatFontIs is also simple, where you just have to right-click on the image whose font you want to know. The extension will automatically detect and mention the source from where you can get the font.
best font finder chrome extension
Browsers are increasingly incorporating more extensions, plugins and add-ons, which are often developed by their users, making the browser more powerful, and helping us increase our productivity. Here at Awwwards, our mission is to share with you the best resources and tools on the web, so we’re writing a series of blog articles on the best extensions and plugins for major browsers. To kick-off, we’re focusing on extensions that are offered in the Chrome Web Store, available for free and easy to install.
Among the tools, we’ll highlight those that are most useful for web designers and developers. We hope you find them useful and get you better results.
Don’t forget to visit our collection Handy Tools and Apps for Designers on a regular basis, where you can find new apps with great ideas to help your creative process.
Best Google Chrome Extensions for Web Designers and Developers
Fonts Ninja – Font identifier Chrome extension
Fonts Ninja helps to identify fonts and provide information about them by checking available styles, foundry, and price. The algorithm examines the fonts as well as their CSS properties.
Fonts Ninja – Font identifier Chrome extension
SVG Grabber
Svg-Grabber is an open-source tool to quickly copy or download all the SVG assets from a website. How many times have you seen an interesting logo or icon on a website, and you craved to have it? Now, the SVG Grabber tool allows you to do that just with a single button click.
SVG Grabber
WhatFont
A very popular and useful Chrome extension for developers and designers. If you are thinking about what font is used on a website, then WhatFont will identify the typeface for you. Just hover over it and find out instantly which font it is.
WhatFont
Image Downloader
Browse and download images from the web with just one click! This extension is a time saver and with it you can explore images on the current page, filter by width, height, or URL, and more!
Image Downloader
HTML to Figma
You can use this useful extension to capture any webpage and import it into Figma to inspect elements and edit layers.
HTML to Figma
PerfectPixel
Using this extension, frontenders can overlay a semi-transparent image over the HTML DOM in order to compare the design with the CSS layout.
PerfectPixel
CSS SCAN
With CSS Scan, you can check, copy and edit the CSS styles of any element in the HTML DOM. Say goodbye to “Inspect Element”, just hover over the elements and copy the styles and CSS rules with a single click.
CSS SCAN
Window Resizer
In order to make your website more responsive, this extension resizes your browser window. You can choose from a list of popular screen dimensions ( desktop, mobile, laptop) or easily add your own custom sizes and resolutions.
Window Resizer
Site Palette – Chrome extension
We all saw examples of websites with great use of color! Site Palette is a Chrome extension which extracts the main colours of the current website. With this tool, you can generate and share your favorite color palettes. Also, you can download a Sketch template or use Adobe Swatch support!
Site Palette – Chrome extension
CSS Peeper
CSS Peeper is a CSS viewer tailored for designers. Inspect elements instantly with handy properties to use in Sketch or Photoshop, and get the whole color palette of the web listed in a visually appealing way. Start Inspecting styles in a simple, well-organized & beautiful way with CSS Peeper.
CSS Peeper
The Great Suspender Original
The Great Suspender suspends unused tabs to save memory and make your computer run more smoothly. It has more advanced features, such as restoring only the tabs you need or all of them at once, creating groups of tabs, etc.
The Great Suspender Original
Hex Color Picker Chrome Extension
This extension allows you to pick colors from your favorite web pages. Hex Color Picker not only extracts color information from CSS styles, but it can also extract RGB values from images.
Hex Color Picker Chrome Extension
Hoverify
Hoverify is a browser extension that enhances your web development experience by providing tools to speed up your workflow, such as CSS and HTML inspectors, CSS live edition, export to Codepen, inspecting media queries, finding fonts, extracting colors, toggling element visibility, and so on. Price $30
Hoverify
Nimbus – Screenshot & Screen Video Recorder Chrome Extension
This Chrome extension allows you to capture the full web page screen or any part of the site and edit the screenshots, trim and crop screencasts, and convert video to gif or mp4.
Nimbus – Screenshot & Screen Video Recorder Chrome Extension
Evernote Web Clipper – Chrome Extension
From interests to research, save anything you see online—including text, links, and images—into your Evernote account with a single click. With one click, you can clip part or all of any webpage, including text, images, and links. Collect everything that inspires you online.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines