What the font! Have you ever been mesmerized by the artistic and creative nature of some the websites on the internet today? Then you might be curious to check what font websites are using. Selecting a good font can instantly improve the quality of a website. It directly affects the website visitors user experience (UX) which could then lead to a higher engagement rate with the website content.
While a stylish and readable font selection for a website can greatly improve website visitors’ user experience, sloppy and illegible fonts can drive website visitors away. As a web designer, it should be your utmost priority to select a font which is stylish, readable, and appropriate for the content and purpose of the website.
Regardless of your reason to check what font a website is using, there are multiple ways to achieve this. In this article, we will discuss several methods to check what font, what font size, and font styles used in title-tags of a website. We will be using blog.google.com as our case study for the purpose of this article.
Method 1 – Check What Font Using The Web Browser Inspection Tools
This is the easiest and quickest method to check what font a website is using. Nowadays almost all of the popular web browsers have a built-in browser inspection tool. In this article, we will be using popular Google Chrome Web Browser.
Open Google Chrome Web Browser and navigate to the webpage containing the font you want to check. Then right-click and select the last option “Inspect“. You may also achieve this using keyboard shortcut: CTRL+SHIFT+I for Windows and CMD+SHIFT+I for Mac.
From the new window open up to your right, select the “Element” tab. Then look for the text using the font you would like to check. It may become highlighted as you select the corresponding HTML element.
Once you select the corresponding HTML element for the text, click on the “Computed” tab. Then look for “font-family“. You should able to see the name of the font used, font size, and style listed here.
If you click on the “Styles” tab, you should be able to see the name of the font used and related CSS to the font.
Method 2 – Check What Font Using Web Browser Extensions
This is a straightforward method for those who are unfamiliar or not comfortable using the web browser inspection tools. Did you know you can install a browser extension to check what font and style a website is using? Of course there is a browser extension for everything!
Head over to Google Chrome Web Store and do a quick search for “What Font“. Install one of the extensions such as Font Finder or Font Finder For Google Chrome.
For the purpose of this article, we will be installing Font Finder Extension. It is a simple extension lets you know what font is used on any website along with its font-family, font-color, font-style, font-size, and font-position. Take a look below.
How To Check What Font Used In A Image
We can easily find what font used in a website using one of the methods mentioned above. But what about font used in an image such as website logos and infographics? If you do a quick Google Search, you can find many website offering tools (free and paid) to figure out what font used in a image.
We checked few of such services and can recommend WhatTheFont. It is a free service offered by myfonts.com. Head over to https://www.myfonts.com/pages/whatthefont. Then you can either upload or drag and drop the image to see what font. Use the Crop-Box tool to select the text from the image and click next.
WhatTheFont will display a results page with similar fonts that are known to exist that matches the text you selected from the image. If no exact match is found, WhatTheFont will display closest matches to the font.
Stylish and legible fonts create a positive website user experience. As a web designer, you are always trying to enhance the website user experience. If this is the case or you are simply trying to figure out what font a website is using, there are few different ways to achieve this as we discussed above.
- How To Check Fonts Using The Web Browser Inspection Tools
- How To Check Fonts Using Web Browser Extensions
- How To Check What Fonts Used In A Image
If you have any questions or suggestions regarding how to check what font a website is using, let us know in the comments section below.