fonts();

function fonts()
{
	let url = window.location.href.match(/\#.*/);
	
	if (url == "#fonts")
	{
		// go to the div "nav"
		let nav = document.getElementsByClassName("nav_left");
	
		// add an anchor
		let anchor = document.createElement("a");
		anchor.setAttribute('id', "fonts");
		anchor.innerHTML = `
			<p>fonts</p>
			<div id="fonts_dropdown">
				<button onclick="change_font()">louisgeorge (defaut)</button>
				<button onclick="change_font()">cabrion</button>
				<button onclick="change_font()">paradroid (titres)</button>
				<button onclick="change_font()">evolvanta</button>
				<button onclick="change_font()">ptroot</button>
				<button onclick="change_font()">tgalcefun</button>
				<button onclick="change_font()">bentonsansbook (payant)</button>
				<button onclick="change_font()">larsseitlight (payant)</button>
			</div>
			`;
		nav[0].appendChild(anchor);
	}
}

function change_font()
{
	let name = event.target.textContent.split(' ')[0];
	console.log(name);
	document.documentElement.style.cssText = "--font-texts: " + name;
	/*
	let content = getComputedStyle(document.documentElement).getPropertyValue('font-family');
	let content = getComputedStyle(document.documentElement).getPropertyValue('@font-face');
	let content = Array.from(document.styleSheets);
	console.log(content);
	*/
	// get all the styleSheets
	const styleSheets = Array.from(document.styleSheets);

	styleSheets.forEach(styleSheet => {
		const cssRules = styleSheet.cssRules;

		// all the font-faces rules
		const rulesFontFace = cssRules.filter(rule => rule.cssText.startsWith('@font-face'));

		rulesFontFace.forEach(fontFace => {
			console.log(fontFace); // CSSFontFaceRule object
		});
	});
}