3 Ways To Identify Fonts Used On A Webpage Or Image

Welcome to a guide on how to identify fonts on a webpage or image. So there is this awesome font on a certain website that you really like a lot, and want to use in your own project. But just how do we identify the font?

  1. Use a browser extension such as Fonts Ninja (Chrome) or Style Scout (Firefox).
  2. Alternatively, use an online service such as Matcherator.
  3. Lastly, there are also mobile apps that can identify fonts, such as Find My Font – Android or iOS.

That’s all for the basics, but read on if you want more!

 

TABLE OF CONTENTS

Identify Fonts Useful Bits & Links The End

 

 

HOW TO IDENTIFY FONTS

All right, let us now get into the various ways to identify fonts on a website.

 

1) 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).

 

2) ONLINE SERVICES

The above browser extensions can only identify fonts for text on a webpage, and they don’t work on images. But thankfully, there are free online tools and apps that we can use to identify fonts used on images.

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.

 

 

3) 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.

 

EXTRA) 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.

 

 

USEFUL BITS & LINKS

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

 

WHERE TO DOWNLOAD THE 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.

  • 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.

Just do a search for “font download” online and you will get a ton more.

 

 

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

 

CHEAT SHEET

Ways To Identify Fonts On Websites (Click To Enlarge)

 

THE END

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 *