As a graphics designer, have you ever encountered a beautiful font being used by 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 that could help us identify the font name.
Here are the five best options you can try!
- 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 the website CSS
- 6 #6 Identify the font name on the website using WhatRuns
#1 Identify font on the website using FontFace Ninja extension
FontFace Ninja is my favorite tool to find a font name along with the styles used in a website. It even provides a direct link to buy or download the font if it’s available for free.
This browser extension also provides a demo box, so we can type any words to see what 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 any website
- Click the FontFace Ninja icon on the browser bar
- Hover the 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 is dedicated to identifying fonts used on a website. FontFace is much like FontFace Ninja, it can determine font name, font family, size, style, height, width, weight, and color, but it comes with a more minimalistic interface. It also provides a direct link to get the free font once it is 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 users figure out a website’s font name quickly. The tool only serves basic information such as the font name, style, size, and weight. There will be no direct download link for the font, so you will be given a name as a clue to find the download link by yourself.
How to use Fount:
- Go to the website page where you want to know the font name
- Open a new tab, visit https://fount.artequalswork.com/
- On the Fount page, click and drag the “Fount” button to the website tab
- The name of the font will show in the upper right corner of the web page
Update: Fount is no longer working on modern browsers.
#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 to capture the screen, upload the screenshot page to WhatTheFont website, and let it examine the font by its visual.
Once finished, you will get a font name along with the download or purchase link. Unfortunately, this service is fairly not so accurate compared to browser extensions like I mentioned on #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 the website CSS
The reason I put this method at the bottom of the list is the difficulty to skim HTML and CSS code. Modern web pages contain a 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 as a web developer, but so confusing for 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 that contains a 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 certain way to find out the font name from CSS. So, this method might not work for all websites.
#6 Identify the font name on the website using WhatRuns
I found another useful browser add-on named WhatRuns. It is 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 a 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 been 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 names in a quick manner.
What do you think? What is your favorite tool for figuring out the font name?
If you have collected all the fonts and want to install them on your computer, check out the trick to install multiple font files in an instant.