page-font-checker.js

(function() {
  let fontData = new Map();

  // Recursive function to walk the DOM tree
  function processNode(node) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      const style = window.getComputedStyle(node);
      const fontFamily = style.getPropertyValue("font-family");
      const fontWeight = style.getPropertyValue("font-weight");
      
      let classNames = [];
      
      if (typeof node.className === 'string') {
        classNames = node.className.split(' ').filter(Boolean); // Filter out empty strings
      } else if (typeof node.className === 'object' && 'length' in node.className) {
        // Likely a DOMTokenList, as for SVG elements
        classNames = Array.from(node.className);
      }

      if ((fontFamily || fontWeight) && classNames.length) {
        const data = `${fontFamily.trim()} : ${fontWeight.trim()}`;

        if (!fontData.has(data)) {
          fontData.set(data, new Set());
        }

        classNames.forEach((className) => fontData.get(data).add(className));
      }
    }

    // Recurse to child nodes
    for (let i = 0; i < node.childNodes.length; i++) {
      processNode(node.childNodes[i]);
    }
  }

  // Start processing from the body tag
  processNode(document.body);

  // Log unique font families, weights and associated classes
  fontData.forEach((classes, font) => {
    console.log(`Font: ${font}`);
    console.log('Classes:', Array.from(classes).join(', '));
  });
})();