diff --git a/fr/script.js b/fr/script.js
index df835f8..83e72d7 100644
--- a/fr/script.js
+++ b/fr/script.js
@@ -9,10 +9,15 @@ function fonts()
 	{
 		// go to the div "nav"
 		let nav = document.getElementsByClassName("nav_left");
-	
+
+		// list the names of the fonts in fonts.css
+		let fontName = list_fonts();
+
 		// add an anchor
 		let anchor = document.createElement("a");
 		anchor.setAttribute('id', "fonts");
+		nav[0].appendChild(anchor);
+
 		anchor.innerHTML = `
 			<p>fonts</p>
 			<div id="fonts_dropdown">
@@ -26,34 +31,46 @@ function fonts()
 				<button onclick="change_font()">larsseitlight (payant)</button>
 			</div>
 			`;
-		nav[0].appendChild(anchor);
+
+		/*
+		// add the buttons automatically
+		let p_font = document.createElement("p");
+		p_font.innerHTML = "fonts";
+		let dropdown = document.createElement("div");
+		dropdown.setAttribute('id', "fonts_dropdown");
+		anchor.appendChild(p_font);
+		anchor.appendChild(dropdown);
+
+		fontName.forEach(function (element)
+		{
+			let paragraph = document.createElement("p");
+			let button = '<button onclick="change_font()">' + element + '</button>';
+			paragraph.innerHTML = button;
+			dropdown.appendChild(paragraph);
+		});
+		*/
 	}
 }
 
 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
-		});
-	});
+function list_fonts()
+{
+		// get all style sheets
+		const styleSheets = Array.from(document.styleSheets);
+		// extract rules from first styleSheet (style.css)
+		const cssRules = styleSheets[0].cssRules;
+		// select only the sub sheet fonts.css
+		let fontSheet = Object.values(cssRules).filter(val => val.cssText.includes("fonts.css"));
+		// extract the rules inside fonts.css
+		let fontRules = fontSheet[0].styleSheet.cssRules;
+		// take only the name of "font-family: name""
+		let fontName = Object.values(fontRules).map(val => val.cssText.match(/(?<=font-family: ").+?(?=")/));
+		return fontName;
 }