Identify fonts being used on website

[youhackme]

Identify fonts being used on website. See font ninja tool and whatruns code.

[youhackme]

Font rendering can be done through Chrome headless browsing:

https://stackoverflow.com/questions/47911613/fetch-rendered-font-using-chrome-headless-browser/47914111#47914111

Puppeteer doesn't expose this API directly, but it's possible to use the raw devtools protocol to get the "Rendered Fonts" information:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://www.stackoverflow.com/')

  await page._client.send('DOM.enable')
  await page._client.send('CSS.enable')
  const doc = await page._client.send('DOM.getDocument')
  const node = await page._client.send('DOM.querySelector', {nodeId: doc.root.nodeId, selector: 'h1'})
  const fonts = await page._client.send('CSS.getPlatformFontsForNode', {nodeId: node.nodeId})

  console.log(fonts)
  await browser.close()
})()

The devtools protocol documentation for CSS.getPlatformFontsForNode can be found here: https://chromedevtools.github.io/devtools-protocol/tot/CSS/#method-getPlatformFontsForNode