3 ms·

I'm working on a tool called Font of Web https://fontofweb.com https://fontofweb.com that helps identify the fonts used on any website. It not only detects the

I'm working on a tool called Font of Web https://fontofweb.com 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 https://fontofweb.com. I would appreciate any feedback

jay-barronville 2y ago
> I've now rebuilt the tool from the ground up, switching from a Puppeteer-based crawler to an invisible iframe approach. Where can I go to learn more about your invisible `<iframe>` approach/implementation?
- sim04ful 2y ago
  I figured it out mostly from first principles. It's such a niche crawling method that was perfectly limited to my use-case, and there's alot to say. But the main idea is that you can inject a crawling script in the html of the site via a proxy you control. E.g proxy.yoursite.com?url=<SITE_YOU_WANT_TO_CRAWL>. Then once you've got the data you can call window.postMessage(data) to communicate with the main window. It's somewhat similar to how browser proxies like: https://proxyium.com/ https://proxyium.com/ and https://www.proxysite.com/ https://www.proxysite.com/ fetch the html on your behalf.
hyperknot 2y ago
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?
- sim04ful 2y ago
  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.
  - hyperknot 2y ago
    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.

jay-barronville 2y ago

> I've now rebuilt the tool from the ground up, switching from a Puppeteer-based crawler to an invisible iframe approach. Where can I go to learn more about your invisible `<iframe>` approach/implementation?

sim04ful 2y ago
I figured it out mostly from first principles. It's such a niche crawling method that was perfectly limited to my use-case, and there's alot to say. But the main idea is that you can inject a crawling script in the html of the site via a proxy you control. E.g proxy.yoursite.com?url=<SITE_YOU_WANT_TO_CRAWL>. Then once you've got the data you can call window.postMessage(data) to communicate with the main window. It's somewhat similar to how browser proxies like: https://proxyium.com/ https://proxyium.com/ and https://www.proxysite.com/ https://www.proxysite.com/ fetch the html on your behalf.

hyperknot 2y ago

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?

sim04ful 2y ago
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.
- hyperknot 2y ago
  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.