diff --git a/script.js b/script.js
index cdaea15..5060ac6 100644
--- a/script.js
+++ b/script.js
@@ -35,32 +35,37 @@ function element(name, attr, content) {
   return el;
 }
 
-const css_template = (info,range,weight,style,variable_info) => {
+function variable_font_url(info,range,axis,style) {
+  return `https://cdn.jsdelivr.net/fontsource/fonts/${info.id}:vf@latest/${range}-${axis}-${style}.woff2`
+}
 
+function get_variable_axis(variable_info) {
   const axes = Object.keys(variable_info.axes || {}).filter(a=>a!='ital');
-  function get_axis() {
-    if (axes.length === 1 && axes[0]=='wght') {
-      return 'wght';
-    }
-
-    if (axes.length === 2 && axes.includes('wght')) {
-        const selected =
-            axes.find((axis) => axis !== 'wght')?.toLowerCase() ?? 'wght';
-        return selected;
-    }  
-    const isStandard = axes.every((axis) =>
-        ['wght', 'wdth', 'slnt', 'opsz'].includes(axis),
-    );
-  
-    return isStandard ? 'standard' : 'full';
+  if (axes.length === 1 && axes[0]=='wght') {
+    return 'wght';
   }
 
-  const axis = get_axis();
+  if (axes.length === 2 && axes.includes('wght')) {
+      const selected =
+          axes.find((axis) => axis !== 'wght')?.toLowerCase() ?? 'wght';
+      return selected;
+  }  
+  const isStandard = axes.every((axis) =>
+      ['wght', 'wdth', 'slnt', 'opsz'].includes(axis),
+  );
+
+  return isStandard ? 'standard' : 'full';
+}
+
+const css_template = (info,range,weight,style,variable_info) => {
+  const axes = Object.keys(variable_info.axes || {}).filter(a=>a!='ital');
+
+  const axis = get_variable_axis(variable_info);
   
   let urls;
   
   if(info.variable) {
-    urls = [`url(https://cdn.jsdelivr.net/fontsource/fonts/${info.id}:vf@latest/${range}-${axis}-${style}.woff2) format('woff2-variations')`];
+    urls = [`url(${variable_font_url(info,range,axis,style)}) format('woff2-variations')`];
   } else {
     const variant = info.variants[weight][style][range];
     urls = Object.entries(variant.url).map(([format,url]) => {
@@ -182,7 +187,7 @@ async function go() {
       document.body.scrollTop = 0;
     }
   
-    document.body.style.setProperty('--family',info.family);
+    document.body.style.setProperty('--family',`"${info.family}"`);
   
     function show_list(id, list, style_fn, text_fn) {
       text_fn = text_fn || (v => v);
@@ -261,6 +266,9 @@ async function go() {
       }
       update_variables();
     }
+
+    const file_list = document.getElementById('file-links');
+    file_list.innerHTML = '';
   
     const css_declarations = [];
     if(info.variable) {
@@ -268,6 +276,9 @@ async function go() {
         for(let range of info.subsets) {
           const css = css_template(info, range, '', style, variable_info);
           css_declarations.push(css);
+
+          const li = element('li',{}, `<a href="${variable_font_url(info,range,get_variable_axis(variable_info),style)}">${range} ${style}</a>`)
+          file_list.append(li);
         }
       }
     
@@ -277,6 +288,15 @@ async function go() {
           for(let range of info.subsets) {
             const css = css_template(info, range, weight, style, variable_info);
             css_declarations.push(css);
+
+            const variant = info.variants[weight][style][range];
+            const ul = element('ul');
+            file_list.append(ul);
+            Object.entries(variant.url).forEach(([format,url]) => {
+              const li = element('li',{}, `<a href="${url}">${weight} ${style} ${range} (${format})</a>`);
+              ul.append(li);
+            });
+            
           }
         }
       }
diff --git a/style.css b/style.css
index 8947921..d5eb3a8 100644
--- a/style.css
+++ b/style.css
@@ -98,4 +98,9 @@ dt {
 
 #css-display {
   margin: 0;
+}
+
+
+#file-links ul + ul {
+    margin-top: var(--spacing);
 }
\ No newline at end of file