Picture this: You’re browsing the Internet – possibly looking at Pinterest quotes or inspiring Instagram images with text – and you come across a font that sparks your curiosity. Just like hearing that catchy song on the radio and not knowing it’s name, you’re not sure if you will ever be able to get your hands on such a beautiful typeface for your website. Well in today’s world, we’re quite spoiled with technological advances, meaning you can say goodbye to that nagging feeling once and for all.
Here, we’ve compiled the following font detection tools for images to help you embody your inner Sherlock Holmes. Not only will we show you where to go to find these hidden font gems, but also how you can preview them on your beautiful website builder, and then later upload them to turn your design visions into a reality.
How to identify fonts from images
01. Use tools to find fonts from images
MyFonts: MyFonts (previously known as ‘WhatTheFont’) is as easy as 1-2-3. You can identify fonts from images with this super simple website. First, upload the image that you’re curious about. Second, select a crop box around the section whose font you want to check. The website automatically identifies and sections off each area it detects font on your image. Lastly, view the font results. If you want to take this one step further, you can also purchase any of the fonts for different prices. This is great if you want to own them, which will come in handy if you plan on uploading them to your website at a later stage… More on that later. Key feature: Purchase the fonts you’ve just discovered to upload to your website. Get started here: MyFonts
WhatFont: This might be the easiest font finder around. That’s because discovering the hidden fonts behind your favorite photo design inspirations is just one click away with WhatFont. It’s a Chrome extension that, once it’s been downloaded, only requires the click of a button and hovering over an image to reveal the font used. You don’t even need to download and save the image ahead of time. And there’s a bonus: It’s not just for images, but entire web pages! Key feature: Browse fonts directly from a website, not just on images. Get started here: WhatFont
Font Squirrel: Most of what you can do on Font Squirrel is evidently the same as MyFonts: upload an image, crop a font, and discover your results. Yet, the main feature that is highly useful and different here is that you can rotate images to be able to crop fonts set at peculiar angles. This is certainly one neat tool that you can’t find most places. Also while you’re on the website, browse through the many font deals offered, some of which won’t even cost you a dime! Key feature: Rotate images to identify fonts embedded in an unconventional form. Get started here: Font Squirrel
02. Preview your font
Essentially font detection tools from images all lead you to the same finale: a font that you just love. So, what’s next? You might admire the way that font looks on the image, but you won’t know how it will be captured on your website until you try it out. So, before you download your chosen font and swap the old one for the new in your website editor, you can preview it first.
Google Font Previewer for Chrome is perfect for just this. It’s an extension that lets you test the looks of different fonts on a website without entering any back office or editing mode. With just the URL and extension, you can preview any font available within the tool. Furthermore, if there are fonts that you like to test often, you can ‘star’ them, as in mark as favorites in your app. If you’re looking for a quick fix, this is a great solution. Once you’ve seen enough different versions and you’re happy with your selected font, keep reading to find out how to welcome your font to its new home.
Get started here: Google Font Previewer
03. Upload your font choice to your website
If you’ve made it this far, you’ve selected a font that inspired you and you’re ready to glamorize your website design with this exquisite choice. If you’re a Wix user, the process couldn’t be any easier. Within the Editor, under ‘My Uploads,’ click the ‘fonts’ button to upload any typeface that you have legal rights to (in other words, a free font or a font that you have already purchased). From here, you’ll be able to embed any font of your choosing. And if you’re feeling fancy and decide to use multiple fonts on your website, you can explore different font pairing techniques here.
Bonus reading: Find out why enchanting typography has made its way to our list of web design trends.
Learn more about how to make a website with our extensive guide.