I’m sure you’ve been there… you started working on an established website and notice there are a few different fonts used. Fine. But wait, why are there 10 fonts being loaded? Why do we need so many? Are these styles actually being displayed on the site?
Trying to investigate this scenario takes a bit of effort… digging through element by element to see what font is used. There are some good tools for this outside of web browser developer tool, such as:
But there has to be a better way than going through the page element by element. Yet I couldn’t find one… until I wrote it that is!
Contents
Introducing the Website Used Fonts Analyzer Bookmarklet
What does it do?
With the click of a button, the current webpage you are viewing is scanned element by element for what font it uses. This is compiled into a report that is displayed, telling you:
- How many font files are used on the page
- How many times each font is used on the page
- What font each element uses
How to use it?
- Create the bookmarklet by following the directions on the github page.
- This is a one-time step per web browser
- Navigate to the web page you wish to analyze.
- Click on the bookmarklet link.
- Read the report.
- Smile that in seconds you have a list of all of the fonts used on the page and you can now finish your cup of coffee stress free!
How to install the bookmarklet
All of the setup information you need can be found at the GitHub repository page.
https://github.com/PromInc/Website-Used-Fonts-Analyzer-Bookmarklet
