Today morning one of my clients sent me a Whatsapp message asking the type of font used in a website designed by someone. Actually he wanted to use the same type of font for his website which I am working with. So let me reveal a way to check the type of font a website is using by opening your browser inspector. As you know the layout of a website is interpreted in your browser, if we can use the browser inspector properly we will be able to figure out fonts, images, CSS properties, and anything else used on the web page. Moreover, we will also see how can we identify the type of font used in an image.
How to Find Font Type Used on a Website
- First, open your browser inspector. In Chrome or Firefox, you can do this by right-clicking on any text element on the website and choosing ‘Inspect’. You can also use the commands Ctrl+Shift+I (Windows) or Cmd+Shift+I (Mac).
2. Once you’re on the correct text element, move and on to ‘Computed’ tab in the inspector and scroll down to the font-family attribute as seen in the image:
Know the Types of Font a Website’s Images are Using
Now on another time, if you want to see what font an image or logo is using there’s a special tool called Font Squirrel Matcherator to serve the purpose.
- Download any image or logo from a website and upload it into the Matcherator interface.
- Using the blue selection box, choose the part of the image whose font you need to analyze.
- Click ‘Matcherate It’
The results from the font finding software will give you fonts that match your selected text very closely. If you think that was not the right match for the font type, then you can Google further using the results you got. For example, if the result that you obtained was Myriad Pro, search in Google ‘Fonts similar to ‘Myriad Pro’ and see what results come up. You can also use whatfontis.com for finding font styles of a website.
I hope you will be able to figure out some website fonts soon.
