How To Identify Fonts Used On A Webpage Or Image

INTRODUCTION

SOLVING THE FONT MYSTERY

Welcome to a guide on how to identify fonts on a webpage or image. So there is this awesome font on a certain website or flyer that you really like a lot, and want to use it in your own projects. But there is just one problem… The identity of the font remains a mystery.

So, just how can we identify the font used on a webpage or image? There are thankfully various free tools to help us do that these days – Read on to find out how!

 

 

 

SECTION A

USING BROWSER EXTENSIONS

Whether you are using Chrome, Opera, or Firefox – Web browsers these days have something called “extensions” or “plugins”. They add features that are otherwise unavailable in the “default installation”, and there are various extensions that we can use to easily identify fonts.

 

CHROME EXTENSIONS

Google Chrome users, check out these plugins:

Simply click on the “Add To Chrome” button to install the extension, and the usage is very straightforward. For example, an icon will be added after installing the Fonts Ninja extension. Simply navigate to the webpage and click on the icon – It will display all the fonts used.

P.S. To manage or remove Chrome Extensions, click on the ⁝ button at the top-right corner > More Tools > Extensions. Or just open a new tab and enter the URL chrome://extensions/.

 

FIREFOX ADDON

Firefox users, here are a few addons that you can use to identify fonts:

Very similarly, just click on the “Add to Firefox” button to install the plugin. Click on the icon to activate the addon, and use it to identify the fonts.

P.S. To manage or remove Firefox Extensions, click on the ☰ button at the top-right corner > Add-Ons. Or just press the shortcut key Ctrl-Shift-A (Command-Shift-A on a Mac).

 

 

SECTION B

USING APPS & ONLINE SERVICES

So far so good? The above browser extensions can identify fonts used as text on a webpage… But they do not identify fonts used on images. So in this section, let us walk through a few online tools and apps that can identify fonts used on images.

 

ONLINE SERVICES

As some of you designer guys may already know that there are a lot of websites providing free fonts these days. But dig deeper, and they actually provide free online font identification services.

The usage is pretty simple – Just upload your image, select a block of text as the sample, and enter the identified alphabets:

P.S. The image identification may not be 100% accurate all the time, but they seem to be good enough – Sometimes even giving fonts that are close alternatives.

 

MOBILE APPS

Ah, the wonders of the smartphone today. Just install a font identification app, fire up, take a photo, and the rest is magic.

 

 

SECTION C

WHERE TO FIND & DOWNLOAD FONTS

Most of the apps and extensions above should also provide a link to download or purchase the identified font. But what if the link is not provided? Here are some of the usual websites that I use to find fonts – You can try your luck with these websites.

 

THE FONT LIBRARIES

These are the “usual suspect font websites”, just do a search for “font download” and you will get a ton more:

  • Font Squirrel
  • Dafont
  • 1001 Free Fonts
  • Urban Fonts
  • Befonts
  • Google Fonts – Yep, Google does provide a ton of free fonts for people to use.
  • Adobe Fonts – This one is not free, but the designer guys should instantly recognize it. Adobe is simply one of the biggest names behind the creative world with Photoshop, Lightroom, Illustrator, Premiere, and After Effects. Their font library is not some small shrimp either.

 

 

EXTRA

USEFUL BITS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

HOW ABOUT FONTS USED IN VIDEOS AND PDF FILES!?

Sadly, there does not seem to have any apps for identifying fonts in videos and PDF files. But since we have something very convenient called the smartphone these days – Just install a font identification app and take a photo of the computer screen itself. Problem solved. If not, the next easiest method is to take a screenshot and upload it to online font identification websites.

  • Windows – Press the Print Screen key > Open Paint > Paste (Ctrl - V) > Save Image.
  • Mac – Press command - control - shift - 3.
  • Android – Press Volume Down + Power buttons together… This may be different for a few oddball manufacturers though.
  • iOS – Press Volume Up + Side buttons together. Older iPhones – Press Home + Side buttons together.

 

COPYRIGHT & COPYLEFT WARNING!

So you now have to power to identify and even download the fonts. But there is one last thing you need to be very careful with… The law. Once upon a time in the Renaissance Age, I worked in a small design house.  A certain designer downloaded fonts from the Internet and used them in a commercial project.

Nothing is going to happen, who the heck goes around looking at all these little details and slaps copyright laws around, so she thought. That fear came true a few years later when the brand became popular. A certain lawyer came knocking on the door with “please pay for the commercial use of fonts X, Y, and Z”.

Yep, it would seem that there are bored people doing this copy strike thing. So please be careful with the font licenses – There are “free” fonts on the Internet, but they may not be free for commercial uses.

 

 

LINKS & REFERENCES

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope this has helped you to better understand, and if you have anything to share with this guide, please feel free to comment below. Good luck and may the cyber force be with you.

Leave a Comment

Your email address will not be published. Required fields are marked *