Copy and paste the following into Notepad and save as List-Fonts.html and then double-click it to open it in your browser. It will show a Generate Font List button. Click that button and then allow it to access your system fonts. A list will be generated. To print that list, right-click the page and select Print.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Windows 11 Font Catalog</title>
<style>
body { font-family: "Segoe UI", -apple-system, sans-serif; margin: 40px; color: #222; }
h2 { font-weight: 600; margin-bottom: 5px; }
p { color: #666; margin-bottom: 20px; font-size: 14px; }
button { background: #0078d4; color: white; border: none; padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 4px; cursor: pointer; }
button:hover { background: #005a9e; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; display: none; }
th, td { border: 1px solid #e0e0e0; padding: 12px 16px; text-align: left; }
th { background-color: #f3f2f1; font-weight: 600; }
.font-name { width: 30%; font-weight: 600; font-size: 14px; color: #333; }
.sample { font-size: 18px; }
@media print {
button, p { display: none; }
table { display: table !important; }
body { margin: 0; }
}
</style>
</head>
<body>
<h2>Windows 11 Font Catalog</h2>
<p>Click the button below to allow your browser to build a clean, duplicate-free table of your installed font families.</p>
<button id="btn-load">Generate Font List</button>
<table id="font-table">
<thead>
<tr>
<th>Font Family Name</th>
<th>Sample Text (Regular Face)</th>
</tr>
</thead>
<tbody id="font-rows"></tbody>
</table>
<script>
document.getElementById('btn-load').addEventListener('click', async () => {
if (!window.queryLocalFonts) {
alert("Your browser doesn't support local font querying. Please open this file using Microsoft Edge or Google Chrome.");
return;
}
try {
// Request the official local system font array
const availableFonts = await window.queryLocalFonts();
// Extract only unique family names to automatically collapse variants
const uniqueFamilies = [...new Set(availableFonts.map(f => f.family))].sort();
const tbody = document.getElementById('font-rows');
tbody.innerHTML = '';
uniqueFamilies.forEach(family => {
const tr = document.createElement('tr');
const tdName = document.createElement('td');
tdName.className = 'font-name';
tdName.textContent = family;
const tdSample = document.createElement('td');
tdSample.className = 'sample';
// Inline styles are safely bound with clean string arrays
tdSample.style.fontFamily = `"${family}", serif`;
tdSample.textContent = 'The quick brown fox jumps over the lazy dog. 1234567890';
tr.appendChild(tdName);
tr.appendChild(tdSample);
tbody.appendChild(tr);
});
document.getElementById('font-table').style.display = 'table';
document.getElementById('btn-load').style.display = 'none';
} catch (err) {
alert("Permission denied or error fetching fonts: " + err.message);
}
});
</script>
</body>
</html>