The names of fonts are rendered using the corresponding font.

Each font's name is rendered to an OffscreenCanvas, and that image is cached in OPFS.

There's a list of links to download font files in the preview.

style.css

@@ -2,10 +2,59 @@
   --spacing: 1em;
   --family: sans-serif;
 
+  --background: white;
+  --color: black;
+
   color-scheme: light dark;
+  height: 100svh;
+  overflow: hidden;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --background: black;
+    --color: white;
+  }
+
+  #font-list img {
+    filter: invert(100%);
+  }
+}
+
 body {
+  display: grid;
+  grid-template-columns: 15em 1fr;
+  gap: var(--spacing);
+  width: 100svw;
+  height: 100svh;
+  margin: 0;
+  overflow: hidden;
+  
+  color: var(--color);
+  background: var(--background);
+}
+
+
+nav {
+    height: 100svh;
+    display: flex;
+    flex-direction: column;
+}
+
+#controls {
+    position: sticky;
+    top: 0;
+    background: var(--background);
+    padding: var(--spacing);
+
+    & select {
+      width: 100%;
+    }
+}
+
+main {
   font-family: var(--family);
+  overflow: auto;
 }
 
 .fixed-font {
@@ -29,4 +78,24 @@ dt {
   max-width: 100%;
   max-height: 3em;
   overflow: auto;
+}
+
+
+#font-list {
+  margin: 0;
+  overflow: auto;
+  width:100%;
+  height:100%;
+  
+  font-size: 2rem;
+  padding: 0;
+  list-style: none;
+  
+  & li {
+    overflow: hidden;
+  }
+}
+
+#css-display {
+  margin: 0;
 }