4 Ways To Identify a Web Font On a Website
Currently, there are thousands and thousands of fonts available for use online. They come in all styles, are meant for a wide variety of functions and can be used to convey nearly any image, from zany and silly all the way to staunch and serious.
However, identifying a font on the Web can be a tricky matter. With so many fonts, many of which can be very similar to one another, finding the exact right font or even one that’s close enough to mimic it can be a challenge.
Fortunately, several tools are available to make the identification of fonts easy and effective. These tools can save you hours, even days of work trying to track down a font by hand by taking the painstaking comparison work out of the process.
With that in mind, here are four tools that can help take some of the labor out of the font-finding process, saving you both time and energy along the way.
1. WhatFont Tool
WhatFont is a bookmarklet, Google Chrome and/or Safari extension that makes it easy to see what fonts are being used on a Web page.
All you do is install WhatFont in your browser, activate it on a page you want more information about and then hover your mouse over the font you want to learn more about. The font name should be displayed over the text.
WhatFont can work with both TypeKit and Google API fonts but will not be able to work on images since its information is derived from the HTML and CSS code of the site.This means it probably won’t be able to find fonts in logos and similar works.
2. What the Font
Where WhatFont won’t be able to get font information from an image, What the Font can do so fairly easily.
What the Font has you either upload an image from your hard drive or point to an image URL on a site. The tool will then break down the image by its parts and have you tell it what each letter is, similar to solving a CAPTCHA one letter at a time.
Though this process can be tedious if you have a good deal of text, it spits out a series of font suggestions. Though the suggestions aren’t always perfect, they usually are able to find a “close enough” font that you can use.
There is even an iPhone app available for finding fonts on the go, including in pictures that you take.
3. What Font Is
What Font Is is similar to What the Font in that you upload or link to an image and enter detected characters, but it adds several additional features including: The ability to filter by free or commercial fonts, to enter more components per character (possibly giving you greater accuracy) and to search for a font by name if it is known.
Considering that What Font Is and What the Font have different font libraries and different matching tools, it’s probably wise to use both in case one doesn’t work. If nothing else, it serves as a second opinion to help you find the font you’re looking for.
4. Identifont
Finally, if the above tools fail and you have a lot of characters to look at, you may want to try Identifont.
Identifont takes a different approach to finding a particular font. Rather than looking at the HTML or parsing the image, Indentifont asks you a series of questions about the font and uses your answers to narrow down the possibilities.
The main problem with Identifont is you need a large sample of the font, including some unusual characters, such as the “$”, “4” and “Q”. But, if you have a good sample of the font, by simply answering a few questions, you can likely narrow it down to a small handful of candidates you can easily go through and match.
All in all, Identifont is best used either for images that the other applications can’t read or for fonts you see in the physical world and can’t easily input into another tool.
In the end, the main function of all these tools is to help speed up the process of going through the countless fonts, commercial and free, to find the one that you’re looking for. On that front, all of these tools can help a great deal.
Still, try not to put too much faith in these tools and use them wisely. Remember that automated matching is no substitute for your own judgment. If two fonts don’t look the same, they probably aren’t and you may need a second opinion.
While these tools may not be perfect, they are certainly a lot better than trying to do it all yourself.
This post is written by Lior Levin, a marketing consultant that works with a web hosting company that offers consumers a list of the best web hosting companies available online. Lior also works for a start up company that offers a to-do list app for businesses and individuals.
Nice list will have to try some of these
Have you tryed some of this tools? how they perform?
Hey Lior,
A really good informative font, I ve been using What the Font for ages now. But good to know about the other tools also!
Great tips. And What the Font has an amazing forum, so if the automated system doesn’t solve it right away, someone on the forum can usually figure it out right away.
Yes indeed – good tools. One note on the “WhatFont” tool – it works with all the web font services, including our Fonts.com web font service.
It displays the CSS @font-face info, including the font that is actually used (if it was a fallback font).