css

Enumerate used font families and sizes

List all font families and sizes used on a page.

The following code can be executed inside the dev tool console (F12).

List all font families
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var foundStyles = {};
var elements = document.querySelectorAll('*');
for (var i = 0; i < elements.length; i++) {
  var style = window.getComputedStyle(elements[i]);
  var family = style.getPropertyValue('font-family');
  var size = style.getPropertyValue('font-size');
  foundStyles[family + '::' + size + '::' + 'regular'] = {
	family: family,
	size: size
  };

  style = window.getComputedStyle(elements[i], ':hover');
  if (style) {
    family = style.getPropertyValue('font-family');
	size = style.getPropertyValue('font-size');
    foundStyles[family + '::' + size + '::' + 'regular'] = {
	  family: family,
	  size: size
    };
  }

  style = window.getComputedStyle(elements[i], ':before');
  if (style) {
    family = style.getPropertyValue('font-family');
	size = style.getPropertyValue('font-size');
    foundStyles[family + '::' + size + '::' + 'regular'] = {
	  family: family,
	  size: size
    };
  }

  style = window.getComputedStyle(elements[i], ':after');
  if (style) {
    family = style.getPropertyValue('font-family');
	size = style.getPropertyValue('font-size');
    foundStyles[family + '::' + size + '::' + 'regular'] = {
	  family: family,
	  size: size
    };
  }
}

var foundStylesTable = [];
for (var k in foundStyles) {
  if (foundStyles.hasOwnProperty(k)) {
	foundStylesTable.push(foundStyles[k]);
  }
}

if (console.table) {
  console.table(foundStylesTable);
}
else {
  console.log(foundStylesTable);
}