There may be times when you browse through certain websites and love the fonts used on the site. You may even want to replicate the exact font structure on your own website, but identifying the font used may not be such as easy thing to do. You probably already use Firebug but it’s not a particularly convenient tool to use. In this article, I’ll show you how you can, at the click of a button, identify fonts used on a website.
The tool I’ll use to identify fonts is WhatFont. It is a free bookmarklet that lets you discover any type of font simply by hovering over the font. It is also available as a Google Chrome extension. WhatFont works great on text but is not too reliable on images. The Whatfont website also has a few test fonts for you to try out and this is one of the most useful and convenient tools that works for me and I hope it works for you as well!
How to Identify Fonts Used on a Website
1. Head over to the WhatFont website.
2. Drag the WhatFont bookmarklet to your bookmarks toolbar.
3. When you find a website with a specific font you want to identify, just click the bookmarklet and hover the mouse pointer over the font.
It’s as easy as that! You can also try other tools listed below to identify fonts on a website.
Flickr Typeface Identification
Font Finder Extension for Firefox
FontGenius (for Mac)
Sometimes, you may find yourself admiring a font in an image or a logo while browsing the web and want to implement it in one of your projects. If that’s something you want to do, here’s how to go about it.
How to Identify Fonts in Images
1. Download and save the image containing the font you want on to your desktop.
2. Navigate to www.whatfontis.com.
3. Click Browse, navigate to the location that contains the image and click Open to upload the image.
4. Select the options for the image you are uploading. For instance, you need to select the correct background option, or choose to display only free fonts, only commercial fonts, or all fonts.
5. Then click Continue.
6. In the next screen, identify the character from the image and highlight it in the adjacent box.
7. Once you have identified all the images, click Continue at the bottom of the screen.
You will get a list of the fonts that closely resemble the font in the image. You also have options to buy or download the fonts.
That’s it. You’ve got your fonts narrowed down pretty quickly and you don’t have to waste any more time searching the internet.
You can also make use of the extensions that are available for Chrome and Firefox browsers to make your task even more easy.
Download WhatFontIs Addon for Firefox
Download WhatFontIs Addon for Chrome
Have you used another tool to identify fonts in images? If so, please share them in the comments section, so others may benefit as well.
Wow, all the years I’ve been doing design I have never thought about trying to find what fonts are used on a website. Trying to find similar ones, Yes. Never thought of using a tool to find the exact font, thank you for sharing this I will be using in the near future!