Hey, Pixels! Have you ever been on a website and noticed that it was using a gorgeous font, but didn’t know what font it was? That’s definitely happened to me, many times. There are so many amazing web fonts ready to be used by us designers. This week, I’m going to show you how to identify any font on the web. So without any further delay, let’s jump right in!
1. Adobe Fonts
Adobe Fonts is such an amazing resource. Not only can you use fonts on related apps like Illustrator and XD, but you can also use Adobe fonts on your own websites. Another great tool that I’ve found very useful is their visual font search. This is very useful if you have an image that has a font you want to use. Simply drag and drop an image or screenshot of the font you want to find, and adobe will instantly scan the photo and match the font.
2. Web Inspector
As a web developer, I’m well aware that you can’t take what you see on a website at face value. One of my favorite ways to explore a website that I like is via the web inspector. That way, I can really see the code and other website assets. You can also use the web inspector to see what font is being used on any web page. Simply highlight the text, click Inspect in Chrome and in the Styles tab, you can see the exact font that is being used. Alternatively, in Firefox, right-click and select Inspect Element and in the right-hand panel, simply select the fonts tab to see the current font being used as well as all fonts on the page.
There is a really great Chrome extension called WhatFont. Simply activate the chrome extension, and on any website, you can hover over areas and instantly see the font family, weight, style, etc. There are also many other chrome extensions that you can use to find fonts on any website.
How do you identify fonts on the web? What tools do you use? Leave a comment below!