A font is a very important element of the media content, such as image (infographics) video, and website. The designer generally can’t determine a name of the font that used by the specific website. It makes sense since there are millions of fonts on the internet that not feasible to remember all those characteristics. Luckily, using some online tools, you can find a name of the font easily. Here’s how to identify font name on the website easily.
In these methods, no need to install additional third-party software. But major browser such as Google Chrome and Mozilla Firefox is necessary due to a browser extension that we gonna to use. But I also have a guide to using online tools.
- 1 #1 Identify font on the website using FontFace Ninja
- 2 #2 Find a website font name by WhatFont
- 3 #3 Identify font without extension with Fount
- 4 #4 Identify font from web page screenshot using WhatTheFont
- 5 #5 Get the font name from website CSS
- 6 Identify font name on the website using WhatRuns (UPDATE)
#1 Identify font on the website using FontFace Ninja
FontFace Ninja is my favorite tools to find an accurate font name along with its profiles that used by the website and it provides a direct link to buy or download the font if it was a free font. This browser extension also gives a demo example for the user, so we can type anything words to see how it looks like after, and customize the color, size, width, and many more before you decide to pick the font.
How to use FontFace Ninja:
- Download and Install FontFace Ninja for Chrome, Firefox, or Safari
- Open the website that you wanna know the font that is used
- Click the FontFace Ninja icon on the browser bar
- Hover mouse pointer over the text
- Finally, you got the font name and link to download or buy
#2 Find a website font name by WhatFont
As the name suggests, this browser extension is dedicated to identifying the font that is used on the website. FontFace is much like FontFace Ninja, it can determine font name, font family, size, style, height, width, weight, and color, but comes with a humble interface. It also provides a direct link to get the free font once it detected, but for premium font, it does not give any link.
How to use WhatFont:
- Download and Install WhatFont for Chrome or Safari
- Go to the website that you want to find out the font
- Click the WhatFont icon that appeared on the browser bar
- Hover the mouse over the web page and click it to get additional information
- If the font is available for free, the extension will provide the download link
#3 Identify font without extension with Fount
A Fount is a web tool created by Nathan Ford to help user figuring out the website’s font name without any browser extension. It’s a pure website service that works fine although its features are far less than FontFace Ninja or WhatFont. But, at the minimal, it has the ability to find out font name, style, size, and weight. Fount also has no affiliate to embed download link of the font, so you need to search the font by self.
How to use Fount:
- Go to the website page that you want to know the font name
- Open a new tab, visit https://fount.artequalswork.com/
- On Fount page, click and drag the “Fount” button to the website tab
- Tha name of the font should automatically show at the upper right corner of the web page
Update: Fount is no longer working since the page missing its major component to detect font name. The actual web page view can be seen through Web Archive but it seems not restoring back the features.
#4 Identify font from web page screenshot using WhatTheFont
WhatTheFont is an online tool to recognize a font from literally any image format, including web page screenshot. As it suggests, you need to capture the screen, upload the page to WhatTheFont, and let it examine font by visual. Once it has done, you will get a font name and page link where to download or buy them. But unfortunately, this service is not very accurate comparing to the browser extension.
How to use WhatTheFont:
- Capture the website page using your favorite screen capturer
- Upload the screenshot to the WhatTheFont page
- Wait until the recognizing process finished
- Grab the font (if available)
#5 Get the font name from website CSS
The reason why I put this method on the last options is that the difficulty to achieve through this way. The modern web pages contain CSS script that acts as the “fashion” of the web. It also includes the font configuration that represented by lines of script. It’s easy to read by a web developer, really hard for ordinary people that not involved in the web development.
How to get font name from CSS:
- Go to the desired website
- Right-click on the blank space
- Select Inspect Element or simply by pressing CTRL+SHIFT+I
- You will see a new box contains ‘random’ script
- Press CTRL+F and type “font-family”
- The format usually like this “blah…blah…font-family: ‘font name’…blah…blah”
Note: There’s no absolute way to find out font name from CSS. So, this method might not work for all websites.
Identify font name on the website using WhatRuns (UPDATE)
Alright, this is the new update. I found useful browser add-on named WhatRuns. It defined as a tool to help developers understand the material/services that used on the website, including font name. If you interested, WhatRuns is available for free on Google Chrome and Mozilla Firefox.
How to identify font name using WhatRuns:
- Install the WhatRuns on Chrome or Firefox.
- Go to any website you want to discover the font name
- Click on the WhatRuns icon and wait for the retrieving process
- Now you see the font name that has identified by the tool
So, that’s the best way to find out font name of a website. In my opinion, the browser extension still manages the most convenient way to identify font name seamlessly.
What do you think? What is your favorite tool for figuring out font name? Let me know in the comment below!