As a designer, have you ever encountered a beautiful font being used on a website that you’d like to use as well on your project?
Well, it’s hard to determine the font name by just seeing it.
Luckily, there are tons of tools to identify the font name.
Check out the guide!
- 1 #1 Identify font on the website using FontFace Ninja extension
- 2 #2 Find a website font name using 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 #6 Identify font name on the website using WhatRuns (UPDATE)
#1 Identify font on the website using FontFace Ninja extension
FontFace Ninja is my favorite tools to find accurate font name along with its profiles used by the website. It provides a direct link to buy or download the font if it was a free font. This browser extension also gives something like a demo, so we can type any words to see how it looks like. You can also 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 desired website
- 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 using WhatFont
As the name suggests, this browser extension dedicated to identifying fonts 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 more minimalistic 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
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 simple website service that works fine although its features are far less than FontFace Ninja or WhatFont. However, at least 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 find the font’s download page by yourself.
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
- The name of the font should automatically show at the upper right corner of the web page
#4 Identify font from web page screenshot using WhatTheFont
WhatTheFont is an online tool to recognize a font from an image, including a web page screenshot. All you need is capture the screen, upload the screenshot page to WhatTheFont website, and let it examine font by visual. Once finished, you will get a font name and link to download or purchase font(s). Unfortunately, this service is fairly not too accurate compared to the browser extensions like I mentioned on the #1 and #2.
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 the difficulty to read HTML and CSS code. The modern web pages contain CSS script that acts as the “style” of the web. It also includes the font configuration represented by lines of script. It’s easy to read for a web developer, but so stressful for ordinary people who have no idea about web programming.
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”
#6 Identify font name on the website using WhatRuns (UPDATE)
I found useful browser add-on named WhatRuns. It defined as a tool to help developers understand the material/services used on the website, including font name. If you are 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 the font name of a website. In my opinion, the browser extension still manages the most convenient way to identify font name easily.
What do you think? What is your favorite tool for figuring out the font name?
Let me know in the comment below!