Checking what font that is being used on a website is pretty easy for web designers. However for users that only knows how to use the WYSIWYG (What You See Is What You Get) web page builders, it won’t be easy. First you need to check the source code, then find out what DIV tags are being used and finally check the the cascading style sheets (CSS) file. The CSS file will reveal what fonts are being used and how large it is set to. An easier way to automatically find out what font that is being used on a website is by using Firefox’s add-on called Font Finder and Context Font.

After installing either add-on, simply use your mouse to highlight a text that you want to check for the font type and size, and right click. Context Font will show the font of selected text directly in the context menu itself. As for Font Finder, you will need to also highlight, right click and go to Font Finder and select Analyze selection. Font Finder is able to give more detailed information such as the font color, background color, line-height, vertical-align, letter-spacing, word-spacing, decoration and element. Trying to check what font and size is being used by Google Adsense requires a bit more work. Useful for webmaster that wants to blend the ads with the text used on their website.


Let’s take this website for an example. Both Font Finder and Context Font shows 12px verdana for this website but when you right click on the Adsense ads, it shows the same thing but weirdly it looks different, probably slightly bigger.

What you need to do is right click on Adsense advertisement, go to This Frame and select Open Frame in New Tab. A new tab will open showing only the Google advertisement and nothing else. If you see an image ad, you will need to refresh until you see the text advertisement. Now highlight the text that you want to check on the font and size, and both Font Finder and Context Font is able to tell you what font and size is being used.

Both Font Finder and Context Font add-on is compatible with Firefox 4.