*

1 files changed, 60 insertions, 13 deletions

diff --git a/html/web-font-vacuum/app.js b/html/web-font-vacuum/app.js
index 445f515..82f877e 100644
--- a/html/web-font-vacuum/app.js
+++ b/html/web-font-vacuum/app.js
@@ -289,7 +289,11 @@ document.addEventListener('DOMContentLoaded', () => {
                                     const fontResponse = await fetchWithProxies(fontUrl, 0, true);
                                     if (fontResponse.ok) {
                                         console.log('Found font at common path:', fontUrl);
-                                        fontUrls.add(fontUrl);
+                                        fontUrls.add({
+                                            url: fontUrl,
+                                            family: 'Unknown Font',
+                                            filename: `${name}.${ext}`
+                                        });
                                     }
                                 } catch (error) {
                                     // Ignore errors for common path checks
@@ -333,10 +337,19 @@ document.addEventListener('DOMContentLoaded', () => {
     function extractFontUrlsFromCss(css, baseUrl, fontUrls) {
         const fontFaceRegex = /@font-face\s*{[^}]*}/g;
         const urlRegex = /url\(['"]?([^'")]+)['"]?\)/g;
+        const fontFamilyRegex = /font-family\s*:\s*['"]?([^'";]*)['"]?/i;
         
         const fontFaces = css.match(fontFaceRegex) || [];
         
         fontFaces.forEach(fontFace => {
+            // Extract font-family name
+            let fontFamilyName = 'Unknown Font';
+            const fontFamilyMatch = fontFace.match(fontFamilyRegex);
+            if (fontFamilyMatch && fontFamilyMatch[1]) {
+                fontFamilyName = fontFamilyMatch[1].trim();
+            }
+            
+            // Extract URLs
             let match;
             while ((match = urlRegex.exec(fontFace)) !== null) {
                 let fontUrl = match[1];
@@ -346,8 +359,14 @@ document.addEventListener('DOMContentLoaded', () => {
                     try {
                         // Properly resolve the font URL against the CSS URL (baseUrl)
                         const absoluteUrl = new URL(fontUrl, baseUrl).href;
-                        console.log('Found font URL:', absoluteUrl);
-                        fontUrls.add(absoluteUrl);
+                        console.log(`Found font URL: ${absoluteUrl} (${fontFamilyName})`);
+                        
+                        // Store both the URL and the font family name
+                        fontUrls.add({
+                            url: absoluteUrl,
+                            family: fontFamilyName,
+                            filename: fontUrl.split('/').pop().split('?')[0]
+                        });
                     } catch (error) {
                         console.error('Error resolving font URL:', fontUrl, error);
                     }
@@ -364,8 +383,20 @@ document.addEventListener('DOMContentLoaded', () => {
             if (href && href.match(/\.(woff|woff2|ttf|otf)(\?.*)?$/i)) {
                 try {
                     const absoluteUrl = new URL(href, baseUrl).href;
-                    console.log('Found preloaded font:', absoluteUrl);
-                    fontUrls.add(absoluteUrl);
+                    const filename = href.split('/').pop().split('?')[0];
+                    
+                    // Try to get font-family from the link
+                    let fontFamilyName = 'Unknown Font';
+                    if (link.dataset.fontFamily) {
+                        fontFamilyName = link.dataset.fontFamily;
+                    }
+                    
+                    console.log(`Found preloaded font: ${absoluteUrl} (${fontFamilyName})`);
+                    fontUrls.add({
+                        url: absoluteUrl,
+                        family: fontFamilyName,
+                        filename: filename
+                    });
                 } catch (error) {
                     console.error('Error resolving font URL:', href, error);
                 }
@@ -378,8 +409,20 @@ document.addEventListener('DOMContentLoaded', () => {
             if (href && href.match(/\.(woff|woff2|ttf|otf)(\?.*)?$/i)) {
                 try {
                     const absoluteUrl = new URL(href, baseUrl).href;
-                    console.log('Found linked font:', absoluteUrl);
-                    fontUrls.add(absoluteUrl);
+                    const filename = href.split('/').pop().split('?')[0];
+                    
+                    // Use link text as potential font name if available
+                    let fontFamilyName = link.textContent.trim() || 'Unknown Font';
+                    if (fontFamilyName === filename) {
+                        fontFamilyName = 'Unknown Font';
+                    }
+                    
+                    console.log(`Found linked font: ${absoluteUrl} (${fontFamilyName})`);
+                    fontUrls.add({
+                        url: absoluteUrl,
+                        family: fontFamilyName,
+                        filename: filename
+                    });
                 } catch (error) {
                     console.error('Error resolving font URL:', href, error);
                 }
@@ -394,23 +437,27 @@ document.addEventListener('DOMContentLoaded', () => {
         const fontsContainer = document.createElement('div');
         fontsContainer.className = 'fonts-container';
         
-        for (const url of urls) {
+        for (const fontData of urls) {
             const fontItem = document.createElement('div');
             fontItem.className = 'font-item';
             
-            const fontName = url.split('/').pop().split('?')[0];
+            const fontUrl = fontData.url;
+            const fontName = fontData.filename;
+            const fontFamily = fontData.family;
             const extension = fontName.split('.').pop().toUpperCase();
-            const fontFamily = `preview-${Math.random().toString(36).substr(2, 9)}`;
+            const previewFontFamily = `preview-${Math.random().toString(36).substr(2, 9)}`;
             
             // Create the font item HTML structure
             fontItem.innerHTML = `
                 <div class="font-info">
                     <strong>${fontName}</strong>
                     <br>
+                    <small>Family: ${fontFamily}</small>
+                    <br>
                     <small>${extension} Font</small>
                 </div>
                 <div class="font-preview" style="display: none;">
-                    <div class="preview-text" style="font-family: '${fontFamily}', sans-serif;">
+                    <div class="preview-text" style="font-family: '${previewFontFamily}', sans-serif;">
                         ${PREVIEW_TEXT}
                     </div>
                     <div class="preview-sizes">
@@ -420,7 +467,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     </div>
                 </div>
                 <div class="font-actions">
-                    <button onclick="downloadFont('${url}', '${fontName}')">Download</button>
+                    <button onclick="downloadFont('${fontUrl}', '${fontName}')">Download</button>
                     <button class="preview-btn">Preview</button>
                 </div>
             `;
@@ -436,7 +483,7 @@ document.addEventListener('DOMContentLoaded', () => {
             previewBtn.addEventListener('click', async () => {
                 if (!fontLoaded) {
                     previewBtn.textContent = 'Loading...';
-                    fontLoaded = await previewFont(url, fontFamily);
+                    fontLoaded = await previewFont(fontUrl, previewFontFamily);
                     previewBtn.textContent = 'Preview';
                 }