Have you ever had this moment of falling in love with some absolutely random website design? It’s the cool images, great text layouts, winning color scheme, but most importantly – outstanding fonts that literally make you want to steal them for your own project.
Designers often face the challenge of finding out what font was used in a particular image or on a website. Looking through an entire collection of fonts hoping to find a match doesn’t guarantee you any success, not to say it takes hours of your precious time. And what if the font is not even there?
I mean, you can always ask for help from experienced web designers, find a relevant forum, or search for another stunning option from the TemplateMonster fonts collection. As far as forums, get ready to wait: maybe a day, maybe several weeks.
…But what if there is no time to wait?
The good news is, it’s easier than you think. You can search for a font by image using special websites. You can even download a browser extension for better convenience.
Today, I selected several free font detectors that you as a web designer should know about. Selecting the font detecting tool is just the first step to uploading it onto your own website.
Keep reading and I’ll tell how it’s done!
Step 1 – Find fonts from images using tools like:
1. What Font Is
“What Font Is” is the most popular service to determine the font from a photo or screenshot. All you need is to upload an image (or specify its URL) and the software will display the most similar options available for purchase at MyFonts. According to What Font Is creators, the requirements for the image are:
- clearly horizontal text
- letter height not less than 100 pixels
- letters do not touch each other
- no more than 50 characters in total
2. What The Font
WhatTheFont is another well-known resource for identifying fonts as its previous competitor. At first glance, it seems like the service steps are similar, but it’s actually not. With WhatTheFont, everything is a bit more complicated: the final result depends directly on the quality of your font image. By the way, the software doesn’t optimize the picture automatically.
And although compared to What Font Is, this resource has a weaker fonts collection, you still have a higher probability of successful font recognition. After all, there is always a website thematic forum to turn to.
3. Font Squirrel
Apparently, Font Squirrel works exactly the same as the previous two services: you upload an image, crop a font, and the software detects possible matching font options. But there is something that makes Font Squirrel unique. In particular, the ability to rotate images and identify fonts embedded in an unconventional form. It’s a super useful instrument when images feature fonts that aren’t placed in the usual horizontal position, and you will not find this feature anywhere else!
Also, do not forget to look through the offered Font Squirrel deals – some of them are really “hot” so don’t miss out on them.
4. Matcherator
Matcherator is an awesome font recognition tool in terms of ease of use. The website has a convenient drag-and-drop function. This means that you can place an image of the font by simply dragging it onto the site with the mouse. The program will surely find what you need! With this tool, you can recognize all kinds of fonts (with and without serifs) at no cost.
Aside from the above online services, you may consider installing one of the browser extensions. Those help you recognize the font not only from the image but also from the inscription. The best part of it is that you have no need to open a new tab every single time you need to detect a font. With the activated extension, the procedure is only a matter of several seconds.
5. Fontface Ninja
FontFaceNinja is at the moment an undisputed leader. The extension not only helps you find out the font title on a website (not from the image) but also gives you a chance to try writing with this font. Moreover, it allows you to download the font you have found and liked!
In addition to the beauty and convenience of this extension, FontFaceNinja has a sort of magic button (mask) that hides all ads from the page, which allows you to enjoy the fonts only. The extension is completely free and works with Chrome and Safari.
6. Type Sample
This is another useful extension, unfortunately, for Chrome users only. It works similarly to the previous option, although Type Sample can boast of some cool unique features. The opportunity to “play with fonts” in real time deserves special attention. When you click on the highlighted text block, you can change the font size, look at the pangram, enter your own text example and try several more tricks unavailable with other services.
By logging into the Type Sample account on Twitter, you can create your own font collection and/or look at someone else’s.
7. WhatFont
Available for both Chrome and Firefox, the WhatFont extension doesn’t seem like a super functional service at first sight. But the truth is, the service provides users with a lot of information about the selected font. WhatFont allows you to define not only the font tiles but also line height, style, size, font family, as well as its current color code.
Finally, you can preview all the letters styled with this font and even download one, provided it was developed by Google.
8. Typ.io
Typ.io is a perfect choice for maximalists refusing to do extra actions or those who simply do not care about the font styles and color codes. After installing the extension, you’ll see the button with the “T” letter in the lower corner of the browser. If you click this button, it will display the titles of all fonts identified on the page in a separate column. To find out where the font is located, just click on its name.
9. Fount
Fount is a great plugin to identify fonts on websites used by many professional web designers. To make it work, you need to add a site to bookmarks and click on it. The cursor will become a cross, so when you click on the font, you’ll see a window with its title, size in pixels, weight, and style. To turn off the Fount mode – press it again. The extension works with such browsers as Safari, Chrome, Firefox, and IE8 +.
Step 2 – Preview your font.
Now that you most likely found THAT stunning font you’ve seen somewhere else, you need to find out whether this font will match your website style. “You’ll never know unless you try” – you might have thought this already and you’d be 100% correct. But downloading every single loved font to your site will be a waste of money, right?
The good news is, if you’re a Chrome user, you can get a preview of any font. Google Font Previewer extension allows you to test them on a website without going into the editing mode. You can also ‘star’ the fonts you preview the most and mark them as favorites in your app.
Step 3 – Upload the custom font to your website.
So, you chose the right font you’ve been hunting for so long and now it’s time to implement one onto your own website design. The most common approach to adding a custom font to a website is by using the FontFace CSS rule.
- Download the font in a relevant format (.ttf or .otf)
- Create a WebFont Kit for cross-browsing by using the Webfont Generator
- Upload this kit to your website using your FTP or file manager
- Update your CSS file
- Use the custom font in your CSS declarations
If you have a WordPress-based site, things can get even easier with a typography plugin – you will not need to mess with the code anymore. Or you can choose to add those fonts to your theme manually by using the functions.php file.
End of the Line…
Sometimes the best way to find the right font is to look for beautiful examples and font collections online. The worst thing for graphic designers is seeing a lovely font and not knowing what it’s called. But now that you’ve got nine ways to identify fonts, you’ll be able to find out their names in just a couple of minutes… or maybe even faster!
P.S. Perhaps, you know some other good font detecting tools that I have not mentioned. Let me know in the comment section!
Read Also
TOP 100 Free Fonts for Designers
60 Free & Premium Bold Fonts for Strong Headlines
25 Latest Free Fonts for Professional Designers
10 Typography Trends to Stick to in 2019
10 Top Font Apps For Typography Addicts or How to Get out of the Endless Fonts Maze