4

I have been looking through the Chrome headless browser documentation but unable to found this information so far.

Is it possible to capture the rendered font on a website? This information is available through the Chrome dev console.

enter image description here

Hyder B.
  • 10,900
  • 5
  • 51
  • 60

1 Answers1

6

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

jkjustjoshing
  • 3,370
  • 4
  • 21
  • 22
Pasi
  • 2,606
  • 18
  • 14
  • Thank you very much, I have been banging my head for months to get this information but did not come across this documentation! – Hyder B. Dec 21 '17 at 05:11
  • @Pasi Is there a way to get the rendered font without using puppeteer, i.e. simply by typing in the DevTools? – Misha Moroshko Sep 09 '19 at 11:41