If you’re a web designer or someone looking for inspiration online, you probably ran into a website you liked that uses cool fonts. And if you were curious like me, you probably wanted to find out exactly what fonts were being used on that website.
Luckily there are a number of tools and font recognizer browser extensions available that can make your job easier.
If you’re looking for browser extensions, there are two decent Chrome plugins you can try:
WhatFont and FontFace Ninja. Both work well but can be a little slow and buggy. Once installed, these extensions will open up a popup box with the name of the font you click on.
Until recently I’ve been using FontFace Ninja regularly. It was a nice plugin that worked well at helping identify fonts on any website. Unfortunately, after the latest update, the plugin became extremely slow and non-responsive and even froze many pages I was using it on, so I had to uninstall it.
However, if you’re not keen on installing another plugin, there is a better way.
One of the best ways of identifying fonts online is by using the tool you probably already have. I’m talking about your Chrome developer tools panel.
To quickly identify what font website uses, you simply open up your developer tool and use the selection tool. After you click on the font, you then select “Elements” tab and on the right panel choose “Computed”, which will be your second tab. Then scroll all the way to the bottom of the right panel and there you will see the name of the font. That’s it. No extra plugins or extensions required.
Here is the quick video on how to identify fonts on a website.
Now you can browse the web and easily and quickly identify the name of any font you see online. Good luck.
In the future, I will publish the list of my favorite typography resources I use to get my typeface inspiration. So please signup for my weekly newsletter so you won’t miss it.
