Skip to content

Instantly share code, notes, and snippets.

@matthewmayer
Last active July 10, 2020 13:30
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save matthewmayer/114570269b1b4e08be4c54c88d8c5683 to your computer and use it in GitHub Desktop.
Save matthewmayer/114570269b1b4e08be4c54c88d8c5683 to your computer and use it in GitHub Desktop.
paste this into Javascript console to see what fonts are being used
function walk(node) {
// I stole this function from here:
// http://is.gd/mwZp7E
var child, next;
var tagName = node.tagName ? node.tagName.toLowerCase() : "";
if (tagName == 'input' || tagName == 'textarea') {
return;
}
if (node.classList && node.classList.contains('ace_editor')) {
return;
}
switch (node.nodeType) {
case 1: // Element
case 9: // Document
case 11: // Document fragment
child = node.firstChild;
while (child) {
next = child.nextSibling;
walk(child);
child = next;
}
break;
case 3: // Text node
handleText(node);
break;
}
}
function handleText(textNode) {
var v = textNode.nodeValue;
var cs = window.getComputedStyle(textNode.parentNode)
if (cs && textNode.parentNode.nodeName != "STYLE" && textNode.parentNode.nodeName != "SCRIPT") {
let font = cs.fontFamily || ""
let size = cs.fontSize
let weight = cs.fontWeight
let weights = {
100: "Thin",
200: "Extra Light",
300: "Light",
400: "Regular",
500: "Medium",
600: "Semibold",
700: "Bold",
800: "Extra Bold",
900: "Black"
}
font = font.replace("sans-serif", "").replace(/[,"]/g, "").trim()
font = font.replace("Red Hat Text", "RHT").replace("Red Hat Display", "RHD")
textNode.nodeValue = font + " " + size + " " + weights[weight]
}
}
walk(document.body)
@justinribeiro
Copy link

You may want to consider using TreeWalker to find textNodes; it's significantly faster, especially for large DOM's. An example is below, written as a DevTools snippet (though you can paste it on the console for use as well).

Note, this won't travel the ShadowDOM (which we don't have a great story for yet on the platform, but it is being discussed).

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"
};

findTextNodesFor(document.body)
  .filter(node => !['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.parentNode.nodeName))
  .forEach(node => {
  const computedStyle = window.getComputedStyle(node.parentNode);
  let font = computedStyle.fontFamily || "";
  const size = computedStyle.fontSize;
  const weight = computedStyle.fontWeight;

  font = font.replace("sans-serif", "").replace(/[,"]/g, "").trim();
  font = font.replace("Red Hat Text", "RHT").replace("Red Hat Display", "RHD");
  node.nodeValue = font + " " + size + " " + weights[weight];
});

Similarly, if you just wanted a look at the styles you have defined, you could do so using new Set() for storing unique values, which can be useful for quick reports:

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.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;
  fonts.add(`${size} ${weights[weight]} ${font}`);
});

console.log(fonts);

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment