How are Font Detection Tools Made Some Examples

Font Detection Tool – Fontofweb.com

Table of Contents

• What is fontofweb.com Font detection tool all about
• Backend and Frontend for fontofweb.com font detection tool
• Detecting fonts with Javascript and CSS

What is fontofweb.com Font detection tool all about

You can visit fontofweb.com , Its is a free font detection website, as per the above screenshot as our site is using the default UI fonts, which show apple-system fonts,

You can add your URL here and you will find the fonts that a website is using.

Backend and Frontend for fontofweb.com font detection tool

The font API service is a node.js server running in Heroku, and puppeteer library to render the website in a virtual browser and all the font information is parsed in HTML.

The front end is coded in a language called mint. Mint is a programming language for writing single-page applications.

Source for this :

[Showoff Saturday] I built fontofweb.com – a tool that shows you the fonts a website uses, where they are used and allows you to download the fonts from webdev

See other free tools a list here – Online Website Testing Tools Free

Detecting fonts with Javascript and CSS

Here is a web page that would detect the fonts used by your system as true or false

https://f2ex.github.io/fontdetect.js/demo/

https://github.com/f2ex/fontdetect.js A GitHub repository of the font detector demo above made on javascript, Uses both JavaScript and CSS to detect the availability of specific fonts in the user’s browser. Almost 100% accurate.

You can find details on How Does it Work on the GitHub Repository link above.