←back to thread

261 points david927 | 3 comments | | HN request time: 0.001s | source

What are you working on? Any new ideas that you're thinking about?
Show context
sim04ful ◴[] No.43159838[source]
I'm working on a tool called Font of Web https://fontofweb.com that helps identify the fonts used on any website. It not only detects the fonts but also shows exactly where they're used (which HTML elements) and how they're styled (weight, line height, size, letter spacing).

My goal is to build a comprehensive database of font usage across the web. By collecting and analyzing this data, I believe we can uncover valuable trends, such as:

* Common font pairings * Popular heading fonts over time * Market share of commercial fonts * Top font foundries based on actual usage

I originally built a version of this four years ago and saw a surprising amount of organic interest. I've now rebuilt the tool from the ground up, switching from a Puppeteer-based crawler to an invisible iframe approach. (More details in another post)

Check out the current version at https://fontofweb.com. I would appreciate any feedback

replies(2): >>43160998 #>>43161473 #
1. hyperknot ◴[] No.43161473[source]
Nice project! Related question, how would you recommend detecting which font is being used for names like ui-sans-serif, system-ui on a given device/browser?
replies(1): >>43161888 #
2. sim04ful ◴[] No.43161888[source]
That's a difficult one, you would need information about the device and operating system to infer the font.

But I imagine, if you realllly needed that info. You could go the hard route and render the font on a canvas, vectorise and perform some sort of nearest neighbour search.

replies(1): >>43161963 #
3. hyperknot ◴[] No.43161963[source]
Thanks! My idea was to just render a Lorem Ipsum paragraph and compare the calculated width-height across a know list of default fonts. Of course it wouldn't work with fixed width fonts, for that I'd need a canvas bitmap comparison.