You’ve all been there. You find a great font on an image in a webpage, and you’d love to use the same font for a project of your own but you have no idea which font you’re looking at.
Karl recently showed you WhatFontIs which could help you but I’m going to show you another way to discover the font you want, and perhaps even get a copy of it, using WhatTheFont.
There’s a problem using unusual fonts – as fonts – on webpages. Simply put, if the webpage uses a font that you don’t have, then you won’t be able to see the page as it is intended. The simplest solution to this problem is the one that is used most. Don’t actually use the font.
Instead, use a graphic image that looks identical. As webpages get more and more complex, this solution is more and more important. MakeUseOf uses this method all the time. Many of our screenshots represent fonts that you almost certainly don’t have installed on your system.
But now and then you need something more. You really like the font you see on a page, and you would like to to make use of it yourself to create the perfect webpage, or to use offline somewhere. To do that, you need to find out what font was used.
WhatTheFont lets you upload or link to the image containing the font, asks you some questions, and presents you with some candidate fonts for comparison.
So how effective is this? Depends. I’d say it’s a great tool to find a similar font. To be sure you have an identical font requires a better eye than I have.
Example 1 – The MakeUseOf logo
Let’s see what we can do with our own dogfood. First, make sure you have access to the image you want to use. Either the URL, or a local copy in a web format, such as .jpg or .png.
Visit the site then provide the address of the image:
Click the Continue button.
WhatTheFont needs to do some work now. If you’ve ever used any OCR (Optical Character Recognition) software you’ll be familiar with the idea. The images is composed of a set of small pixels. Fonts are instead sets of geometric models. Translation between these is the part that requires some effort.
The next page that appears is where you can help. WhatTheFont has made some guesses as to what some of the characters are that make up the logo.
In some cases, the guesses are not correct. For instance, se is tagged as being the letter m. You can easily fix these by changing the values in the boxes.
Some guesses are a little more complex though. The website cannot correctly recognise that this is one letter e, rather than two unknown characters.
These are also easy to fix though. Drag one of these images over the other and drop it. The page will be redrawn, and you can correctly tag the character.
When you have completed as many of these characters as you can, click Continue again.
WhatTheFont uses all of the supplied information and presents you with a set of fonts that best fit.
In this case, Futura SB-Bold Con seems a very close match. If you click on the font name you are forwarded to a more central part of the MyFonts site, and presented with information and samples specifically about that one font.
From here, the choices are yours. Look up more details, buy the font. Find free options. you can spend a lot of time in here.
Example 2 – Signage
Let’s try something a little harder from the real world.
You know how it works now, so let’s just hit the high points. First off… it didn’t work. That is, until I cropped it down to just the text.
After that, things went more normally.
Turns out that there are some good matches.
Anyway, that should give you enough to get started. Enjoy yourself. If you need any more help with fonts, first give the rest of MyFonts a try. if that doesn’t do it for you, Identifont can help you out when the automatic options don’t work. And if you want to learn to identify fonts yourself, find out some more at FontTrainer.
How did it go for you? Let me know in the comments.
Hey Facebookers, make sure to check out MakeUseOf fan page on Facebook. Over 20,000 fans already!
Similar MakeUseOf Articles
- Easily Identify That Cool Text Font with WhatFontIs (7 comments)
- WEB DESIGN: 5 Sites To Get Inspiration and Ideas (10 comments)
- 6 Excellent Mac Apps for Graphic & Web Design (11 comments)
- 2 Free Tools To Make Your Own Text Font (19 comments)
- 10 Cool Free Computer Fonts That Will Make You Stand Out (19 comments)
- What are you lookin’ at? Cool Sites To Feed Your Photo Fetish (9 comments)
- Two Sites To Earn Easy Money With Your Creative Designs (16 comments)
- Top 7 Websites To Check Out Cool Art Designs (7 comments)
- TinEye – Searching For Images With An Image (20 comments)
- The Best 3 Tools to Search for Images Online by Color (28 comments)
