Find font definitions of elements in a page.

font-report-devtools-snippet.md

Find font defintions for elements within a page with DevTools

This is simple DevTools snippt that uses TreeWalker to find textNodes, and then we parse what font styles are in use on that node with getComputedStyle.

Note, this won't travel the ShadowDOM which is it's own can of worms.

function findTextNodesFor(element){
  let node; 
  const discoveredTextNodes = []; 
  const walkTree = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
  while(node = walkTree.nextNode()) {
    discoveredTextNodes.push(node);
  }
  return discoveredTextNodes;
}

weights = {
  100: "Thin",
  200: "Extra Light",
  300: "Light",
  400: "Regular",
  500: "Medium",
  600: "Semibold",
  700: "Bold",
  800: "Extra Bold",
  900: "Black"
};

fonts = new Set();

findTextNodesFor(document.querySelector('body'))
  .filter(node => !['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.parentNode.nodeName))
  .forEach(node => {
  const computedStyle = window.getComputedStyle(node.parentNode);
  const font = computedStyle.fontFamily || "";
  const size = computedStyle.fontSize;
  const weight = computedStyle.fontWeight;
  const weights = {
    100: "Thin",
    200: "Extra Light",
    300: "Light",
    400: "Regular",
    500: "Medium",
    600: "Semibold",
    700: "Bold",
    800: "Extra Bold",
    900: "Black"
  };

  fonts.add(`${size} ${weights[weight]} ${font}`);
});

console.table([...fonts].sort());

Example output

Why?

Co-worker sent me a link to this and I decided to rewrite it into report form.