How To Easily Find The Font on Any Webpage!

This article will explain how to Find Fonts used on any Website. You just need to install the extension, activate it on a site and click on the ant font element you will see the results.

Chrome & Torch Extension

The easiest way to identify fonts on web pages.

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

Recommended by Wired WebMonkey, Lifehacker, and SwissMiss.

More info: http://chengyinliu.com/whatfont.html

Install the extension: Click Me!

Opera add-ons

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

“Font Finder” has 3 key pieces of functionality:

1. Any font on a page can be completely analyzed
2. Any piece of an element’s information can be copied to the clipboard
3. Any active element can have any piece of the font’s options (such as color, size or family) adjusted inline

Any of these options can be quickly accessed through highlight & right-click, or right-click on the page and inspect element item.

Information Captured:

1. Font color (rgb and hex)
2. Background color (rgb and hex)
3. Font family (including actual font being rendered!)
4. Font size
5. Line-height, vertical-align, letter and word spacing
6. Font weight, style, variant
7. Text-transform, decoration, align and indent
8. Element’s type, class, and ID

For FAQs and bug reports please visit: http://add0n.com/font-finder.html

Install the Add-Ons: Click Me!

Mozilla add-ons

FontFinder 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 inline replacements to test new layouts.

Install the Add-Ons: Click Me!

 

Well, I hope this article must have helped you. If you have any problem regarding this post just drop your comment here or you can also say “Thanks” simply.

Have fun! 🙂