Get fonts from current web page

extract.js

// Open the inspector of a page you want to check and run the following script.

const foundVariants = [];

function variation(family, weight, style) {
	return {key : `${family}-${weight}-${style}`, family, style, weight};
}

// Loop over all selectors
document.querySelectorAll('*').forEach(e => {
	// Get computed styles by the browser
	const css = window.getComputedStyle(e);
	// Get the font family
	const families = (css.fontFamily || '').split(',')
		.map(e => e.trim())
		.map(e => e.replace(/"/g, ''))
		// Filter these defaults out
		.filter(e => e !== 'sans-serif' && e !== 'serif');

	const style = css.fontStyle;
	const weight = css.fontWeight;

	const results = families.map(family => variation(family, weight, style));

	// For each family, if it was unknown, add it to the list
	results.forEach(result => {
		if (!foundVariants.map(f => f.key).includes(result.key)) {
			foundVariants.push(result);
		}
	});
});

console.log('Found the following variations of fonts', foundVariants.map(({family, weight, style}) => ({family, style, weight})));