diff --git a/src/BeaconLcp.js b/src/BeaconLcp.js
index 5dc5ab1..e052db6 100644
--- a/src/BeaconLcp.js
+++ b/src/BeaconLcp.js
@@ -57,7 +57,8 @@ class BeaconLcp {
                 return (
                     item.rect.width > 0 &&
                     item.rect.height > 0 &&
-                    BeaconUtils.isIntersecting(item.rect)
+                    BeaconUtils.isIntersecting(item.rect) &&
+                    BeaconUtils.isElementVisible(item.element)
                 );
             })
             .map(item => ({
diff --git a/src/BeaconPreloadFonts.js b/src/BeaconPreloadFonts.js
index 238234b..aca9338 100644
--- a/src/BeaconPreloadFonts.js
+++ b/src/BeaconPreloadFonts.js
@@ -1,4 +1,7 @@
 'use strict';
+
+import BeaconUtils from "./Utils.js";
+
 class BeaconPreloadFonts {
     constructor(config, logger) {
         this.config = config;
@@ -11,6 +14,46 @@ class BeaconPreloadFonts {
             .map(ext => ext.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
             .join('|');
         this.FONT_FILE_REGEX = new RegExp(`\\.(${extensions})(\\?.*)?$`, 'i');
+        
+        // Elements that cannot be styled with font-family
+        this.EXCLUDED_TAG_NAMES = new Set([
+            // Metadata/document head
+            'BASE', 'HEAD', 'LINK', 'META', 'STYLE', 'TITLE', 'SCRIPT',
+            
+            // Media
+            'IMG', 'VIDEO', 'AUDIO', 'EMBED', 'OBJECT', 'IFRAME',
+            
+            // Templating, wrappers, components, fallback
+            'NOSCRIPT', 'TEMPLATE', 'SLOT', 'CANVAS',
+            
+            // Resources
+            'SOURCE', 'TRACK', 'PARAM',
+            
+            // SVG references
+            'USE', 'SYMBOL',
+            
+            // Layout work
+            'BR', 'HR', 'WBR',
+            
+            // Obsolete/deprecated
+            'APPLET', 'ACRONYM', 'BGSOUND', 'BIG', 'BLINK', 'CENTER', 'FONT', 'FRAME', 'FRAMESET', 'MARQUEE', 'NOFRAMES', 'STRIKE', 'TT', 'U', 'XMP'
+        ]);
+    }
+
+    /**
+     * Checks if a URL should be excluded from external font processing based on domain exclusions.
+     * 
+     * @param {string} url - The URL to check.
+     * @returns {boolean} True if the URL should be excluded, false otherwise.
+     */
+    isUrlExcludedFromExternalProcessing(url) {
+        if (!url) return false;
+        
+        // Check both exclusion arrays for domain filtering
+        const externalFontExclusions = this.config.external_font_exclusions || [];
+        const preloadFontsExclusions = this.config.preload_fonts_exclusions || [];
+        const allExclusions = [...externalFontExclusions, ...preloadFontsExclusions];
+        return allExclusions.some((exclusion) => url.includes(exclusion));
     }
 
     /**
@@ -56,26 +99,30 @@ class BeaconPreloadFonts {
         return false;
       }
 
+    /**
+     * Checks if an element can be styled with font-family.
+     * 
+     * This method determines if the provided element's tag name is not in the list
+     * of excluded tag names that cannot be styled with font-family CSS property.
+     * 
+     * @param {Element} element - The element to check.
+     * @returns {boolean} True if the element can be styled with font-family, false otherwise.
+     */
+    canElementBeStyledWithFontFamily(element) {
+        return !this.EXCLUDED_TAG_NAMES.has(element.tagName);
+    }
+
     /**
      * Checks if an element is visible in the viewport.
      * 
-     * This method checks if the provided element is visible in the viewport by
-     * considering its display, visibility, opacity, width, and height properties.
-     * It returns true if the element is visible, and false otherwise.
+     * This method delegates to BeaconUtils.isElementVisible() for consistent
+     * visibility checking across all beacons.
      * 
      * @param {Element} element - The element to check for visibility.
      * @returns {boolean} True if the element is visible, false otherwise.
      */
     isElementVisible(element) {
-        const style = window.getComputedStyle(element);
-        const rect = element.getBoundingClientRect();
-        return !(
-            style.display === 'none' ||
-            style.visibility === 'hidden' ||
-            style.opacity === '0' ||
-            rect.width === 0 ||
-            rect.height === 0
-        );
+        return BeaconUtils.isElementVisible(element);
     }
 
     /**
@@ -203,20 +250,25 @@ class BeaconPreloadFonts {
         }
 
         // --- Main logic for fetching Google Fonts ---
-        const externalFontsProviders = [
-            'fonts.googleapis.com',
-            'fonts.gstatic.com',
-            'use.typekit.net',
-            'fonts.adobe.com',
-            'cdn.fonts.net',
-            // Add more known external font domains as needed
-        ];
-
+        // Process ALL external CSS links, filter by exclusions instead of allowlist
         const links = [
-            ...document.querySelectorAll('link[rel="stylesheet"]'),
-        ].filter((link) =>
-            externalFontsProviders.some((domain) => link.href.includes(domain))
-        );
+        ...document.querySelectorAll('link[rel="stylesheet"]')
+        ].filter(link => {
+            try {
+                const linkUrl = new URL(link.href);
+                const currentUrl = new URL(window.location.href);
+                
+                // Only process external domains (different origin)
+                if (linkUrl.origin === currentUrl.origin) {
+                    return false;
+                }
+                
+                // Use the helper method for consistent exclusion logic
+                return !this.isUrlExcludedFromExternalProcessing(link.href);
+            } catch (e) {
+                return false;
+            }
+        });
 
         if (links.length === 0) {
             this.logger.logMessage('No external CSS links found to process.');
@@ -345,60 +397,227 @@ class BeaconPreloadFonts {
      * font-face rules, including their source URLs, font families, weights,
      * and styles. It returns an object containing the collected font data.
      * 
-     * @returns {Object} An object mapping font families to their respective
+     * @returns {Promise<Object>} An object mapping font families to their respective
      *                  URLs and variations.
      */
-    getFontFaceRules() {
-        const stylesheetFonts = {};
+    async getFontFaceRules() {
+      const stylesheetFonts = {};
+      const processedUrls = new Set(); // Track processed URLs to prevent infinite loops
+      
+      const processFontFaceRule = (rule, baseHref = null) => {
+        const src = rule.style.getPropertyValue("src");
+        const fontFamily = rule.style.getPropertyValue("font-family").replace(/['"]/g, "").trim();
+        const weight = rule.style.getPropertyValue("font-weight") || "400";
+        const style = rule.style.getPropertyValue("font-style") || "normal";
+        
+        if (!stylesheetFonts[fontFamily]) {
+          stylesheetFonts[fontFamily] = { urls: [], variations: /* @__PURE__ */ new Set() };
+        }
+        
+        // Use the same URL extraction logic as _extractFirstUrlFromSrc to prevent duplicates
+        const extractFirstUrlFromSrc = (srcValue) => {
+          if (!srcValue) return null;
+          const urlMatch = srcValue.match(/url\s*\(\s*(['"]?)(.+?)\1\s*\)/);
+          return urlMatch ? urlMatch[2] : null;
+        };
+        
+        // Extract only the first URL to match the behavior of external fonts processing
+        const firstUrl = extractFirstUrlFromSrc(src);
+        if (firstUrl) {
+          let rawUrl = firstUrl;
+          if (baseHref) {
+            rawUrl = new URL(rawUrl, baseHref).href;
+          }
+          const normalized = this.cleanUrl(rawUrl);
+          if (!stylesheetFonts[fontFamily].urls.includes(normalized)) {
+            stylesheetFonts[fontFamily].urls.push(normalized);
+            stylesheetFonts[fontFamily].variations.add(
+              JSON.stringify({ weight, style })
+            );
+          }
+        }
+      };
 
-        Array.from(Array.from(document.styleSheets))
-            .filter(sheet => !sheet.href || new URL(sheet.href).origin === location.origin)
-            .forEach((sheet) => {
-                try {
-                    Array.from(sheet.cssRules || []).forEach((rule) => {
-                        if (rule instanceof CSSFontFaceRule) {
-                            const src = rule.style.getPropertyValue('src');
-                            const fontFamily = rule.style.getPropertyValue('font-family')
-                                .replace(/['"]+/g, '')
-                                .trim();
-                            const weight = rule.style.getPropertyValue('font-weight') || '400';
-                            const style = rule.style.getPropertyValue('font-style') || 'normal';
-
-                            if (!stylesheetFonts[fontFamily]) {
-                                stylesheetFonts[fontFamily] = {
-                                    urls: [],
-                                    variations: new Set()
-                                };
-                            }
+      const processImportRule = async (rule) => {
+        try {
+          const importUrl = rule.href;
+          
+          // Check if URL should be excluded based on external font exclusions
+          if (this.isUrlExcludedFromExternalProcessing(importUrl)) {
+            return;
+          }
+          
+          // Prevent infinite loops by checking if URL already processed
+          if (processedUrls.has(importUrl)) {
+            return;
+          }
+          processedUrls.add(importUrl);
+          
+          const response = await fetch(importUrl, { mode: 'cors' });
+          if (!response.ok) {
+            this.logger.logMessage(`Failed to fetch @import CSS: ${response.status}`);
+            return;
+          }
+          
+          const cssText = await response.text();
+          const tempSheet = new CSSStyleSheet();
+          tempSheet.replaceSync(cssText);
+          
+          // Process the imported stylesheet
+          Array.from(tempSheet.cssRules || []).forEach((importedRule) => {
+            if (importedRule instanceof CSSFontFaceRule) {
+              processFontFaceRule(importedRule, importUrl);
+            }
+          });
+        } catch (error) {
+          this.logger.logMessage(`Error processing @import rule: ${error.message}`);
+        }
+      };
 
-                            const urls = src.match(/url\(['"]?([^'"]+)['"]?\)/g) || [];
-                            urls.forEach((urlMatch) => {
-                                let rawUrl = urlMatch.match(/url\(['"]?([^'"]+)['"]?\)/)[1];
-                                // Reconstruct url to absolute if stylesheet is not internal.
-                                if (sheet.href) {
-                                    rawUrl = new URL(rawUrl, sheet.href).href;
-                                }
-                                const normalizedUrl = this.cleanUrl(rawUrl);
-                                if (!stylesheetFonts[fontFamily].urls.includes(normalizedUrl)) {
-                                    stylesheetFonts[fontFamily].urls.push(normalizedUrl);
-                                    stylesheetFonts[fontFamily].variations.add(JSON.stringify({
-                                        weight,
-                                        style
-                                    }));
-                                }
-                            });
+      const processSheet = async (sheet) => {
+        try {
+          const rules = Array.from(sheet.cssRules || []);
+          
+          for (const rule of rules) {
+            if (rule instanceof CSSFontFaceRule) {
+              processFontFaceRule(rule, sheet.href);
+            } else if (rule instanceof CSSImportRule) {
+              if (rule.styleSheet) {
+                await processSheet(rule.styleSheet);
+              } else {
+                await processImportRule(rule);
+              }
+            } else if (rule.styleSheet) {
+              await processSheet(rule.styleSheet);
+            }
+          }
+        } catch (e) {
+          // If we can't access cssRules due to CORS, try to process the stylesheet content directly
+          if (e.name === 'SecurityError' && sheet.href) {
+            // Check if URL should be excluded based on external font exclusions
+            if (this.isUrlExcludedFromExternalProcessing(sheet.href)) {
+              return;
+            }
+            
+            // Prevent infinite loops for CORS fallback too
+            if (processedUrls.has(sheet.href)) {
+              return;
+            }
+            processedUrls.add(sheet.href);
+            
+            try {
+              const response = await fetch(sheet.href, { mode: 'cors' });
+              if (response.ok) {
+                const cssText = await response.text();
+                
+                // Create a temporary stylesheet to parse the CSS
+                const tempSheet = new CSSStyleSheet();
+                tempSheet.replaceSync(cssText);
+                
+                // Process any @font-face rules in the external CSS
+                Array.from(tempSheet.cssRules || []).forEach((rule) => {
+                  if (rule instanceof CSSFontFaceRule) {
+                    processFontFaceRule(rule, sheet.href);
+                  }
+                });
+                
+                // Look for @import statements and process them
+                const importRegex = /@import\s+url\(['"]?([^'")]+)['"]?\);?/g;
+                let importMatch;
+                while ((importMatch = importRegex.exec(cssText)) !== null) {
+                  const importUrl = new URL(importMatch[1], sheet.href).href;
+                  
+                  // Check if URL should be excluded based on external font exclusions
+                  if (this.isUrlExcludedFromExternalProcessing(importUrl)) {
+                    continue;
+                  }
+                  
+                  // Prevent infinite loops
+                  if (processedUrls.has(importUrl)) {
+                    continue;
+                  }
+                  processedUrls.add(importUrl);
+                  
+                  try {
+                    const importResponse = await fetch(importUrl, { mode: 'cors' });
+                    if (importResponse.ok) {
+                      const importCssText = await importResponse.text();
+                      const tempImportSheet = new CSSStyleSheet();
+                      tempImportSheet.replaceSync(importCssText);
+                      
+                      Array.from(tempImportSheet.cssRules || []).forEach((importedRule) => {
+                        if (importedRule instanceof CSSFontFaceRule) {
+                          processFontFaceRule(importedRule, importUrl);
                         }
-                    });
-                } catch (e) {
-                    this.logger.logMessage(e);
+                      });
+                    }
+                  } catch (importError) {
+                    this.logger.logMessage(`Error fetching @import ${importUrl}: ${importError.message}`);
+                  }
                 }
-            });
+              }
+            } catch (fetchError) {
+              this.logger.logMessage(`Error fetching stylesheet ${sheet.href}: ${fetchError.message}`);
+            }
+          } else {
+            this.logger.logMessage(`Error processing stylesheet: ${e.message}`);
+          }
+        }
+      };
 
-        Object.values(stylesheetFonts).forEach(fontData => {
-            fontData.variations = Array.from(fontData.variations).map(v => JSON.parse(v));
-        });
+      // Process all stylesheets
+      const sheets = Array.from(document.styleSheets);
+      for (const sheet of sheets) {
+        await processSheet(sheet);
+      }
 
-        return stylesheetFonts;
+      // Process inline <style> elements that may contain @import statements
+      const inlineStyleElements = document.querySelectorAll('style');
+      for (const styleElement of inlineStyleElements) {
+        const cssText = styleElement.textContent || styleElement.innerHTML || '';
+        
+        // Look for @import statements in the inline CSS
+        const importRegex = /@import\s+url\s*\(\s*['"]?([^'")]+)['"]?\s*\)\s*;?/g;
+        let importMatch;
+        
+        while ((importMatch = importRegex.exec(cssText)) !== null) {
+          const importUrl = importMatch[1];
+          
+          // Check if URL should be excluded based on external font exclusions
+          if (this.isUrlExcludedFromExternalProcessing(importUrl)) {
+            continue;
+          }
+          
+          // Prevent infinite loops
+          if (processedUrls.has(importUrl)) {
+            continue;
+          }
+          processedUrls.add(importUrl);
+          
+          try {
+            const response = await fetch(importUrl, { mode: 'cors' });
+            if (response.ok) {
+              const importCssText = await response.text();
+              const tempSheet = new CSSStyleSheet();
+              tempSheet.replaceSync(importCssText);
+              
+              Array.from(tempSheet.cssRules || []).forEach((importedRule) => {
+                if (importedRule instanceof CSSFontFaceRule) {
+                  processFontFaceRule(importedRule, importUrl);
+                }
+              });
+            }
+          } catch (importError) {
+            this.logger.logMessage(`Error fetching inline @import ${importUrl}: ${importError.message}`);
+          }
+        }
+      }
+
+      Object.values(stylesheetFonts).forEach((fontData) => {
+        fontData.variations = Array.from(fontData.variations).map((v) => JSON.parse(v));
+      });
+      
+      return stylesheetFonts;
     }
 
     /**
@@ -418,6 +637,20 @@ class BeaconPreloadFonts {
         return elementTop <= foldPosition;
     }
 
+    /**
+     * Checks if an element can be processed for font analysis.
+     * 
+     * This method combines checks for whether an element can be styled with font-family
+     * and whether it is above the fold, providing a single method to determine if an
+     * element should be processed during font analysis.
+     * 
+     * @param {Element} element - The element to check.
+     * @returns {boolean} True if the element can be processed, false otherwise.
+     */
+    canElementBeProcessed(element) {
+        return this.canElementBeStyledWithFontFamily(element) && this.isElementAboveFold(element);
+    }
+
     /**
      * Initiates the process of analyzing and summarizing font usage on the page.
      * This method fetches network-loaded fonts, stylesheet fonts, and external font pairs.
@@ -431,12 +664,12 @@ class BeaconPreloadFonts {
         await document.fonts.ready;
         await this._initializeExternalFontSheets();
         const networkLoadedFonts = this.getNetworkLoadedFonts();
-        const stylesheetFonts = this.getFontFaceRules();
+        const stylesheetFonts = await this.getFontFaceRules();
         const hostedFonts = new Map();
         const externalFontsResults = await this.processExternalFonts(this.externalParsedPairs);
 
         const elements = Array.from(document.getElementsByTagName('*'))
-            .filter(el => this.isElementAboveFold(el));
+            .filter(el => this.canElementBeProcessed(el));
 
         elements.forEach(element => {
             const processElementFont = (style, pseudoElement = null) => {
@@ -508,6 +741,8 @@ class BeaconPreloadFonts {
 
                     data.variations.forEach(variation => {
                         let matchingUrl = null;
+                        
+                        // First try to find in network loaded fonts
                         for (const styleUrl of data.urls) {
                             const normalizedStyleUrl = this.cleanUrl(styleUrl);
                             if (networkLoadedFonts.has(normalizedStyleUrl)) {
@@ -515,10 +750,10 @@ class BeaconPreloadFonts {
                                 break;
                             }
                         }
-
-                        // Track URLs per location
+                        
+                        // Track URLs per location ONLY if we found a matching network loaded font
                         if (matchingUrl) {
-                            // Only create new object if a valid matching url exist in network loaded fonts.
+                            // Only create new object if a valid matching url exists in network loaded fonts.
                             if (!allFonts[fontFamily]) {
                                 allFonts[fontFamily] = {
                                     type: 'hosted',
@@ -556,10 +791,7 @@ class BeaconPreloadFonts {
                         }
                     });
 
-                    if (!Object.prototype.hasOwnProperty.call(allFonts, fontFamily)) {
-                        return;
-                    }
-
+                    // Only add to hostedFontsResults if we actually found matching fonts
                     if (allFonts[fontFamily]) {
                         // Copy to hostedFontsResults
                         hostedFontsResults[fontFamily] = {
@@ -575,8 +807,12 @@ class BeaconPreloadFonts {
         // Process External Fonts
         if (Object.keys(externalFontsResults).length > 0) {
             Object.entries(externalFontsResults).forEach(([url, data]) => {
+                // Split elements into above and below fold for accurate counting
+                const aboveElements = Array.from(data.elements).filter(el => this.isElementAboveFold(el));
+                const belowElements = Array.from(data.elements).filter(el => !this.isElementAboveFold(el));
+                
                 // Only process if we're in full mode or the font appears above fold
-                if (data.elementCount.aboveFold > 0) {
+                if (data.elementCount.aboveFold > 0 || aboveElements.length > 0) {
                     data.variations.forEach(variation => {
                         // Initialize font family entry if it doesn't exist
                         if (!allFonts[variation.family]) {
@@ -597,10 +833,6 @@ class BeaconPreloadFonts {
                             };
                         }
 
-                        // Split elements into above and below fold for accurate counting
-                        const aboveElements = Array.from(data.elements).filter(el => this.isElementAboveFold(el));
-                        const belowElements = Array.from(data.elements).filter(el => !this.isElementAboveFold(el));
-
                         // Add variation with its specific location and element counts
                         allFonts[variation.family].variations.push({
                             weight: variation.weight,
@@ -674,7 +906,7 @@ class BeaconPreloadFonts {
     async processExternalFonts(fontPairs) {
         const matches = new Map();
         const elements = Array.from(document.getElementsByTagName('*'))
-            .filter(el => this.isElementAboveFold(el));
+            .filter(el => this.canElementBeProcessed(el));
 
         const fontMap = new Map();
         Object.entries(fontPairs).forEach(([url, variations]) => {
diff --git a/src/Utils.js b/src/Utils.js
index aba6cbc..021bbe5 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -39,6 +39,92 @@ class BeaconUtils {
         return window.pageYOffset > 0 || document.documentElement.scrollTop > 0;
     }
 
+    /**
+     * Checks if an element is visible in the viewport.
+     * 
+     * This method checks if the provided element is visible in the viewport by
+     * considering its display, visibility, opacity, width, and height properties.
+     * It also excludes elements with transparent text properties.
+     * It returns true if the element is visible, and false otherwise.
+     * 
+     * @param {Element} element - The element to check for visibility.
+     * @returns {boolean} True if the element is visible, false otherwise.
+     */
+    static isElementVisible(element) {
+        const style = window.getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+
+        // Defensive check for style
+        if (!style) {
+            return false;
+        }
+
+        // Exclude elements with transparent text properties
+        if (this.hasTransparentText(element)) {
+            return false;
+        }
+
+        return !(
+            style.display === 'none' ||
+            style.visibility === 'hidden' ||
+            style.opacity === '0' ||
+            rect.width === 0 ||
+            rect.height === 0
+        );
+    }
+
+    /**
+     * Checks if an element has transparent text properties.
+     *
+     * This method checks for specific CSS properties that make text invisible,
+     * such as `color: transparent`, `color: rgba(..., 0)`, `color: hsla(..., 0)`,
+     * `color: #...00` (8-digit hex with alpha = 0), and `filter: opacity(0)`.
+     *
+     * @param {Element} element - The element to check.
+     * @returns {boolean} True if the element has transparent text properties, false otherwise.
+     */
+    static hasTransparentText(element) {
+        const style = window.getComputedStyle(element);
+
+        // Defensive check for style properties
+        if (!style) {
+            return false;
+        }
+        
+        const color = style.color || '';
+        const filter = style.filter || '';
+
+        // Check for `color: transparent`
+        if (color === 'transparent') {
+            return true;
+        }
+
+        // Check for `color: rgba(..., 0)`
+        const rgbaMatch = color.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*0\)/);
+        if (rgbaMatch) {
+            return true;
+        }
+
+        // Check for `color: hsla(..., 0)`
+        const hslaMatch = color.match(/hsla\(\d+,\s*\d+%,\s*\d+%,\s*0\)/);
+        if (hslaMatch) {
+            return true;
+        }
+
+        // Check for `color: #...00` (8-digit hex with alpha = 0)
+        const hexMatch = color.match(/#[0-9a-fA-F]{6}00/);
+        if (hexMatch) {
+            return true;
+        }
+
+        // Check for `filter: opacity(0)`
+        if (filter.includes('opacity(0)')) {
+            return true;
+        }
+
+        return false;
+    }
+
 }
 
 export default BeaconUtils;
\ No newline at end of file
diff --git a/test/BeaconLcp.test.js b/test/BeaconLcp.test.js
index af13966..be57c0a 100644
--- a/test/BeaconLcp.test.js
+++ b/test/BeaconLcp.test.js
@@ -96,4 +96,272 @@ describe('BeaconManager', function() {
             assert.strictEqual(elementInfo, null);
         });
     });
+
+    describe('#_generateLcpCandidates()', function() {
+        let mockElements;
+        
+        beforeEach(function() {
+            mockElements = [
+                {
+                    nodeName: 'IMG',
+                    parentElement: { nodeName: 'div' },
+                    getBoundingClientRect: () => ({
+                        width: 300,
+                        height: 200,
+                        top: 0,
+                        left: 0,
+                        bottom: 200,
+                        right: 300
+                    })
+                },
+                {
+                    nodeName: 'IMG',
+                    parentElement: { nodeName: 'div' },
+                    getBoundingClientRect: () => ({
+                        width: 250,
+                        height: 150,
+                        top: 10,
+                        left: 10,
+                        bottom: 160,
+                        right: 260
+                    })
+                },
+                {
+                    nodeName: 'IMG',
+                    parentElement: { nodeName: 'div' },
+                    getBoundingClientRect: () => ({
+                        width: 200,
+                        height: 100,
+                        top: 20,
+                        left: 20,
+                        bottom: 120,
+                        right: 220
+                    })
+                }
+            ];
+
+            global.document = {
+                querySelectorAll: () => mockElements
+            };
+
+            global.window = {
+                ...global.window,
+                innerWidth: 1200,
+                innerHeight: 800,
+                getComputedStyle: sinon.stub()
+            };
+
+            // Mock BeaconUtils.isIntersecting to return true by default
+            const UtilsStub = sinon.stub();
+            UtilsStub.isIntersecting = sinon.stub().returns(true);
+            beacon.constructor.Utils = UtilsStub;
+        });
+
+        afterEach(function() {
+            sinon.restore();
+        });
+
+        it('should filter out elements with opacity: 0', function() {
+            // Setup: first element has opacity 0, second is visible
+            global.window.getComputedStyle
+                .onCall(0).returns({ display: 'block', visibility: 'visible', opacity: '0', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(1).returns({ display: 'block', visibility: 'visible', opacity: '0', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(2).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(3).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(4).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(5).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' });
+
+            beacon.config = { elements: 'img' };
+            
+            // Mock _getElementInfo to return valid info for visible elements
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // Should only return 2 candidates (excluding the one with opacity: 0)
+            assert.strictEqual(candidates.length, 2);
+            assert.strictEqual(candidates[0].element, mockElements[1]);
+            assert.strictEqual(candidates[1].element, mockElements[2]);
+        });
+
+        it('should filter out elements with visibility: hidden', function() {
+            // Setup: first element has visibility hidden, others are visible
+            global.window.getComputedStyle
+                .onCall(0).returns({ display: 'block', visibility: 'hidden', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(1).returns({ display: 'block', visibility: 'hidden', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(2).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(3).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(4).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(5).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' });
+
+            beacon.config = { elements: 'img' };
+            
+            // Mock _getElementInfo to return valid info for visible elements
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // Should only return 2 candidates (excluding the one with visibility: hidden)
+            assert.strictEqual(candidates.length, 2);
+            assert.strictEqual(candidates[0].element, mockElements[1]);
+            assert.strictEqual(candidates[1].element, mockElements[2]);
+        });
+
+        it('should filter out elements with display: none', function() {
+            // Setup: first element has display none, others are visible
+            global.window.getComputedStyle
+                .onCall(0).returns({ display: 'none', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(1).returns({ display: 'none', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(2).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(3).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(4).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(5).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' });
+
+            beacon.config = { elements: 'img' };
+            
+            // Mock _getElementInfo to return valid info for visible elements
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // Should only return 2 candidates (excluding the one with display: none)
+            assert.strictEqual(candidates.length, 2);
+            assert.strictEqual(candidates[0].element, mockElements[1]);
+            assert.strictEqual(candidates[1].element, mockElements[2]);
+        });
+
+        it('should include elements with visible styles', function() {
+            // All elements are visible
+            global.window.getComputedStyle.returns({ display: 'block', visibility: 'visible', opacity: '1' });
+
+            beacon.config = { elements: 'img' };
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            assert.strictEqual(candidates.length, 3);
+            // Should be sorted by area (largest first)
+            assert.strictEqual(candidates[0].element, mockElements[0]); // 300x200 = 60000
+            assert.strictEqual(candidates[1].element, mockElements[1]); // 250x150 = 37500
+            assert.strictEqual(candidates[2].element, mockElements[2]); // 200x100 = 20000
+        });
+
+        it('should handle multiple hidden elements with different visibility issues', function() {
+            // Mix of visibility issues
+            global.window.getComputedStyle
+                .onCall(0).returns({ display: 'none', visibility: 'visible', opacity: '1' })    // hidden by display
+                .onCall(1).returns({ display: 'block', visibility: 'hidden', opacity: '1' })    // hidden by visibility
+                .onCall(2).returns({ display: 'block', visibility: 'visible', opacity: '0' });  // hidden by opacity
+
+            beacon.config = { elements: 'img' };
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // All elements should be filtered out
+            assert.strictEqual(candidates.length, 0);
+        });
+
+        it('should handle edge case with very low opacity but not zero', function() {
+            // Test with very low opacity (0.01) - should be included as it's not exactly 0
+            global.window.getComputedStyle
+                .onCall(0).returns({ display: 'block', visibility: 'visible', opacity: '0.01', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(1).returns({ display: 'block', visibility: 'visible', opacity: '0.01', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(2).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(3).returns({ display: 'block', visibility: 'visible', opacity: '1', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(4).returns({ display: 'block', visibility: 'visible', opacity: '0', color: 'rgb(0,0,0)', filter: '' })
+                .onCall(5).returns({ display: 'block', visibility: 'visible', opacity: '0', color: 'rgb(0,0,0)', filter: '' });
+
+            beacon.config = { elements: 'img' };
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // Should include elements with opacity 0.01 and 1, but not 0
+            assert.strictEqual(candidates.length, 2);
+            assert.strictEqual(candidates[0].element, mockElements[0]);
+            assert.strictEqual(candidates[1].element, mockElements[1]);
+        });
+
+        it('should maintain existing functionality for elements with zero dimensions', function() {
+            // Test that elements with zero width/height are still filtered out
+            mockElements[0].getBoundingClientRect = () => ({
+                width: 0,
+                height: 200,
+                top: 0,
+                left: 0,
+                bottom: 200,
+                right: 0
+            });
+
+            global.window.getComputedStyle.returns({ display: 'block', visibility: 'visible', opacity: '1' });
+
+            beacon.config = { elements: 'img' };
+            sinon.stub(beacon, '_getElementInfo').returns({ src: 'test.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // Should exclude element with zero width
+            assert.strictEqual(candidates.length, 2);
+            assert.strictEqual(candidates[0].element, mockElements[1]);
+            assert.strictEqual(candidates[1].element, mockElements[2]);
+        });
+
+        it('should reproduce and fix the belivria.com bug scenario', function() {
+            // Simulate the belivria.com scenario from the bug report
+            const hiddenImage = {
+                nodeName: 'IMG',
+                src: 'test_inline2.jpeg',
+                parentElement: { nodeName: 'div' },
+                getBoundingClientRect: () => ({
+                    width: 350,
+                    height: 350,
+                    top: 50,
+                    left: 50,
+                    bottom: 400,
+                    right: 400
+                })
+            };
+
+            const visibleImage = {
+                nodeName: 'IMG', 
+                src: 'img_nature.jpg',
+                parentElement: { nodeName: 'div' },
+                getBoundingClientRect: () => ({
+                    width: 350,
+                    height: 350,
+                    top: 50,
+                    left: 50,
+                    bottom: 400,
+                    right: 400
+                })
+            };
+
+            global.document.querySelectorAll = () => [hiddenImage, visibleImage];
+
+            // Mock computed styles - hidden image has opacity: 0, visible image has opacity: 1
+            global.window.getComputedStyle
+                .withArgs(hiddenImage).returns({ display: 'block', visibility: 'visible', opacity: '0' })
+                .withArgs(visibleImage).returns({ display: 'block', visibility: 'visible', opacity: '1' });
+
+            beacon.config = { elements: 'img' };
+
+            // Mock _getElementInfo to return valid image info
+            sinon.stub(beacon, '_getElementInfo')
+                .withArgs(hiddenImage).returns({ src: 'test_inline2.jpeg', type: 'img' })
+                .withArgs(visibleImage).returns({ src: 'img_nature.jpg', type: 'img' });
+
+            const candidates = beacon._generateLcpCandidates(10);
+
+            // Before fix: would return hiddenImage as first candidate due to DOM order
+            // After fix: should only return visibleImage
+            assert.strictEqual(candidates.length, 1);
+            assert.strictEqual(candidates[0].element, visibleImage);
+            assert.strictEqual(candidates[0].elementInfo.src, 'img_nature.jpg');
+
+            // Verify the hidden image is not in candidates
+            const hiddenImageCandidate = candidates.find(c => c.element === hiddenImage);
+            assert.strictEqual(hiddenImageCandidate, undefined);
+        });
+    });
 });
diff --git a/test/BeaconPreloadFonts.test.js b/test/BeaconPreloadFonts.test.js
index 6b41c55..3bd1e0c 100644
--- a/test/BeaconPreloadFonts.test.js
+++ b/test/BeaconPreloadFonts.test.js
@@ -34,7 +34,8 @@ describe('BeaconPreloadFonts', () => {
         const config = {
             system_fonts: ['Arial', 'Helvetica'],
             font_data: {},
-            preload_fonts_exclusions: []
+            preload_fonts_exclusions: [],
+            external_font_exclusions: []
         };
 
         // Initialize the class with mock config and logger
@@ -77,6 +78,34 @@ describe('BeaconPreloadFonts', () => {
         };
 
         global.CSSFontFaceRule = function() {};
+        global.CSSImportRule = function() {};
+        global.CSSStyleSheet = function() {
+            this.cssRules = [];
+            this.replaceSync = function(cssText) {
+                // Mock implementation - could parse cssText if needed
+            };
+        };
+
+        // Mock fetch for @import processing
+        global.fetch = sinon.stub().resolves({
+            ok: true,
+            text: () => Promise.resolve('@font-face { font-family: "MockFont"; src: url("mock.woff2"); }')
+        });
+
+        // Mock URL constructor
+        global.URL = function(url, base) {
+            if (base) {
+                // Simple URL resolution for testing
+                if (url.startsWith('http')) {
+                    this.href = url;
+                } else {
+                    const baseUrl = base.endsWith('/') ? base : base + '/';
+                    this.href = baseUrl + url;
+                }
+            } else {
+                this.href = url;
+            }
+        };
 
         // Mocking the DOM elements and their styles
         document.body.innerHTML = `
@@ -91,6 +120,11 @@ describe('BeaconPreloadFonts', () => {
                     display: element.style.display || 'block',
                     visibility: element.style.visibility || 'visible',
                     opacity: element.style.opacity || '1',
+                    color: element.style.color || 'rgb(0, 0, 0)',
+                    filter: element.style.filter || '',
+                    fontFamily: element.style.fontFamily || 'Arial',
+                    fontWeight: element.style.fontWeight || '400',
+                    fontStyle: element.style.fontStyle || 'normal'
                     // Add any other styles you need to mock
                 };
             }
@@ -104,6 +138,40 @@ describe('BeaconPreloadFonts', () => {
         sinon.restore(); // Restore sinon mocks
     });
 
+    describe('isUrlExcludedFromExternalProcessing', () => {
+        it('should return false when no exclusions are configured', () => {
+            const result = beaconPreloadFonts.isUrlExcludedFromExternalProcessing('https://fonts.googleapis.com/css');
+            assert.strictEqual(result, false);
+        });
+
+        it('should return true when URL matches external font exclusion', () => {
+            beaconPreloadFonts.config.external_font_exclusions = ['fonts.googleapis.com'];
+            const result = beaconPreloadFonts.isUrlExcludedFromExternalProcessing('https://fonts.googleapis.com/css');
+            assert.strictEqual(result, true);
+        });
+
+        it('should return true when URL matches preload fonts exclusion', () => {
+            beaconPreloadFonts.config.preload_fonts_exclusions = ['fonts.googleapis.com'];
+            beaconPreloadFonts.config.external_font_exclusions = []; // explicitly empty
+            const result = beaconPreloadFonts.isUrlExcludedFromExternalProcessing('https://fonts.googleapis.com/css');
+            assert.strictEqual(result, true);
+        });
+
+        it('should return false when URL does not match any exclusion', () => {
+            beaconPreloadFonts.config.external_font_exclusions = ['fonts.adobe.com'];
+            beaconPreloadFonts.config.preload_fonts_exclusions = ['Roboto'];
+            const result = beaconPreloadFonts.isUrlExcludedFromExternalProcessing('https://fonts.googleapis.com/css');
+            assert.strictEqual(result, false);
+        });
+
+        it('should return false for null or undefined URLs', () => {
+            beaconPreloadFonts.config.external_font_exclusions = ['fonts.googleapis.com'];
+            assert.strictEqual(beaconPreloadFonts.isUrlExcludedFromExternalProcessing(null), false);
+            assert.strictEqual(beaconPreloadFonts.isUrlExcludedFromExternalProcessing(undefined), false);
+            assert.strictEqual(beaconPreloadFonts.isUrlExcludedFromExternalProcessing(''), false);
+        });
+    });
+
     describe('isExcluded', () => {
         it('should return true when fontFamily exactly matches exclusion', () => {
             beaconPreloadFonts.config.preload_fonts_exclusions = ['Arial'];
@@ -145,6 +213,34 @@ describe('BeaconPreloadFonts', () => {
             element.style.display = 'none';
             assert.strictEqual(beaconPreloadFonts.isElementVisible(element), false);
         });
+
+        it('should return false for elements with transparent text', () => {
+            const element = document.createElement('div');
+            element.style.display = 'block';
+            element.style.visibility = 'visible';
+            element.style.opacity = '1';
+            
+            // Mock getComputedStyle to return transparent color
+            const originalGetComputedStyle = window.getComputedStyle;
+            window.getComputedStyle = sinon.stub().returns({
+                color: 'transparent',
+                filter: '',
+                display: 'block',
+                visibility: 'visible',
+                opacity: '1'
+            });
+            
+            // Add mock getBoundingClientRect
+            element.getBoundingClientRect = sinon.stub().returns({
+                width: 100,
+                height: 100
+            });
+            
+            assert.strictEqual(beaconPreloadFonts.isElementVisible(element), false);
+            
+            // Restore original function
+            window.getComputedStyle = originalGetComputedStyle;
+        });
     });
 
     describe('cleanUrl', () => {
@@ -219,6 +315,112 @@ describe('BeaconPreloadFonts', () => {
         });
     });
 
+    describe('canElementBeStyledWithFontFamily', () => {
+        it('should return true for elements that can be styled with font-family', () => {
+            const element = { tagName: 'DIV' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, true);
+        });
+
+        it('should return true for text elements', () => {
+            const element = { tagName: 'P' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, true);
+        });
+
+        it('should return false for IMG elements', () => {
+            const element = { tagName: 'IMG' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, false);
+        });
+
+        it('should return false for SCRIPT elements', () => {
+            const element = { tagName: 'SCRIPT' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, false);
+        });
+
+        it('should return false for STYLE elements', () => {
+            const element = { tagName: 'STYLE' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, false);
+        });
+
+        it('should return false for META elements', () => {
+            const element = { tagName: 'META' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, false);
+        });
+
+        it('should return false for BR elements', () => {
+            const element = { tagName: 'BR' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, false);
+        });
+
+        it('should return false for deprecated FONT elements', () => {
+            const element = { tagName: 'FONT' };
+            const result = beaconPreloadFonts.canElementBeStyledWithFontFamily(element);
+            assert.strictEqual(result, false);
+        });
+    });
+
+    describe('canElementBeProcessed', () => {
+        it('should return true for elements that can be styled and are above fold', () => {
+            const element = document.createElement('div');
+            element.tagName = 'DIV';
+            document.body.appendChild(element);
+            
+            // Mock the methods to return true for both checks
+            sinon.stub(beaconPreloadFonts, 'canElementBeStyledWithFontFamily').returns(true);
+            sinon.stub(beaconPreloadFonts, 'isElementAboveFold').returns(true);
+            
+            const result = beaconPreloadFonts.canElementBeProcessed(element);
+            assert.strictEqual(result, true);
+            
+            // Clean up
+            document.body.removeChild(element);
+            beaconPreloadFonts.canElementBeStyledWithFontFamily.restore();
+            beaconPreloadFonts.isElementAboveFold.restore();
+        });
+
+        it('should return false for elements that cannot be styled even if above fold', () => {
+            const element = document.createElement('img');
+            element.tagName = 'IMG';
+            document.body.appendChild(element);
+            
+            // Mock the methods - can't be styled but is above fold
+            sinon.stub(beaconPreloadFonts, 'canElementBeStyledWithFontFamily').returns(false);
+            sinon.stub(beaconPreloadFonts, 'isElementAboveFold').returns(true);
+            
+            const result = beaconPreloadFonts.canElementBeProcessed(element);
+            assert.strictEqual(result, false);
+            
+            // Clean up
+            document.body.removeChild(element);
+            beaconPreloadFonts.canElementBeStyledWithFontFamily.restore();
+            beaconPreloadFonts.isElementAboveFold.restore();
+        });
+
+        it('should return false for elements that can be styled but are below fold', () => {
+            const element = document.createElement('div');
+            element.tagName = 'DIV';
+            document.body.appendChild(element);
+            
+            // Mock the methods - can be styled but is below fold
+            sinon.stub(beaconPreloadFonts, 'canElementBeStyledWithFontFamily').returns(true);
+            sinon.stub(beaconPreloadFonts, 'isElementAboveFold').returns(false);
+            
+            const result = beaconPreloadFonts.canElementBeProcessed(element);
+            assert.strictEqual(result, false);
+            
+            // Clean up
+            document.body.removeChild(element);
+            beaconPreloadFonts.canElementBeStyledWithFontFamily.restore();
+            beaconPreloadFonts.isElementAboveFold.restore();
+        });
+    });
+
     describe('run', () => {
         it('should log no fonts found if no fonts are above the fold', async () => {
             // Mock methods
@@ -289,6 +491,30 @@ describe('BeaconPreloadFonts', () => {
             });
             assert.ok(loggerMock.logMessage.notCalled);
         });
+
+        // Test for regression fix: ensure theme assets are not preloaded when not in network fonts
+        it('should not include hosted fonts that are not in network loaded fonts (regression fix)', () => {
+            // This test ensures the fix for the theme assets preloading issue
+            const hostedFonts = new Map();
+            hostedFonts.set('Inter', {
+                variations: [{ weight: '400', style: 'normal' }],
+                elements: new Set([document.createElement('div')]),
+                urls: ['https://e2e.rocketlabsqa.ovh/wp-content/themes/twentytwenty/assets/fonts/inter/Inter-upright-var.woff2']
+            });
+
+            // Mock the isElementAboveFold method to return true for the element
+            sinon.stub(beaconPreloadFonts, 'isElementAboveFold').callsFake(() => true);
+
+            // Empty network loaded fonts - theme font not actually loaded by browser
+            const networkLoadedFonts = new Map();
+            const externalFontsResults = {};
+
+            const result = beaconPreloadFonts.summarizeMatches(externalFontsResults, hostedFonts, networkLoadedFonts);
+
+            // The Inter font should NOT be included because it's not in networkLoadedFonts
+            assert.strictEqual(Object.keys(result.allFonts).length, 0, 'Should not include fonts not in network loaded fonts');
+            assert.strictEqual(Object.keys(result.hostedFonts).length, 0, 'Should not include theme fonts in hosted results');
+        });
     });
 
     describe('processExternalFonts', () => {
@@ -370,13 +596,43 @@ describe('BeaconPreloadFonts', () => {
     });
 
     describe('getFontFaceRules', () => {
-        it('should return an empty object when no stylesheets exist', function() {
+        let originalFetch;
+        let originalCSSStyleSheet;
+        let originalURL;
+
+        beforeEach(() => {
+            // Store original globals
+            originalFetch = global.fetch;
+            originalCSSStyleSheet = global.CSSStyleSheet;
+            originalURL = global.URL;
+        });
+
+        afterEach(() => {
+            // Restore original globals
+            if (originalFetch) {
+                global.fetch = originalFetch;
+            } else {
+                delete global.fetch;
+            }
+            if (originalCSSStyleSheet) {
+                global.CSSStyleSheet = originalCSSStyleSheet;
+            } else {
+                delete global.CSSStyleSheet;
+            }
+            if (originalURL) {
+                global.URL = originalURL;
+            } else {
+                delete global.URL;
+            }
+        });
+
+        it('should return an empty object when no stylesheets exist', async function() {
             document.styleSheets = [];
-            const result = beaconPreloadFonts.getFontFaceRules();
+            const result = await beaconPreloadFonts.getFontFaceRules();
             assert.deepStrictEqual(result, {});
         });
         
-        it('should process multiple font-face rules correctly', function() {
+        it('should process multiple font-face rules correctly', async function() {
             // Create mock stylesheets with font-face rules
             const mockCSSFontFaceRule1 = createMockFontFaceRule('Roboto', 'url("fonts/roboto.woff2")', '700', 'normal');
             const mockCSSFontFaceRule2 = createMockFontFaceRule('Roboto', 'url("fonts/roboto-italic.woff2")', '700', 'italic');
@@ -396,8 +652,7 @@ describe('BeaconPreloadFonts', () => {
 
             beaconPreloadFonts.cleanUrl = sinon.stub().callsFake(url => url.split('?')[0]);
             
-            const result = beaconPreloadFonts.getFontFaceRules();
-            console.log('result', result);
+            const result = await beaconPreloadFonts.getFontFaceRules();
             
             // Verify correct parsing
             assert.strictEqual(Object.keys(result).length, 2, 'Should have two font families');
@@ -415,7 +670,7 @@ describe('BeaconPreloadFonts', () => {
             assert.ok(beaconPreloadFonts.cleanUrl.called, 'cleanUrl should be called');
         });
         
-        it('should handle multiple src URLs in one font-face rule', function() {
+        it('should handle multiple src URLs in one font-face rule', async function() {
             const multipleSrcRule = createMockFontFaceRule(
                 'MyCustomFont3', 
                 'url("fonts/font.woff2") format("woff2"), url("fonts/font.woff") format("woff"), url("fonts/font.ttf") format("truetype")',
@@ -428,13 +683,15 @@ describe('BeaconPreloadFonts', () => {
                 cssRules: [multipleSrcRule]
             }];
             
-            const result = beaconPreloadFonts.getFontFaceRules();
+            const result = await beaconPreloadFonts.getFontFaceRules();
             
             assert.ok(result['MyCustomFont3'], 'Should have MyCustomFont3');
-            assert.strictEqual(result['MyCustomFont3'].urls.length, 3, 'Should extract all 3 URLs');
+            // After our fix, we only extract the first URL to prevent duplicates
+            assert.strictEqual(result['MyCustomFont3'].urls.length, 1, 'Should extract only the first URL');
+            assert.strictEqual(result['MyCustomFont3'].urls[0], 'fonts/font.woff2', 'Should have the first URL from the src');
         });
         
-        it('should convert relative URLs to absolute when stylesheet has href', function() {
+        it('should convert relative URLs to absolute when stylesheet has href', async function() {
             const fontFaceRule = createMockFontFaceRule('Arial', 'url("../fonts/arial.woff2")', '400', 'normal');
             
             document.styleSheets = [{
@@ -446,13 +703,13 @@ describe('BeaconPreloadFonts', () => {
                 href: 'https://example.com/fonts/arial.woff2'
             });
             
-            const result = beaconPreloadFonts.getFontFaceRules();
+            const result = await beaconPreloadFonts.getFontFaceRules();
             
             assert.strictEqual(result['Arial'].urls[0], 'https://example.com/fonts/arial.woff2', 
                                 'Should convert relative URL to absolute');
         });
         
-        it('should handle errors when accessing cross-origin stylesheets', function() {
+        it('should handle errors when accessing cross-origin stylesheets', async function() {
             // Create a stylesheet that throws error when accessing cssRules
             const errorStyleSheet = {
                 get cssRules() {
@@ -462,14 +719,14 @@ describe('BeaconPreloadFonts', () => {
             
             document.styleSheets = [errorStyleSheet];
             
-            const result = beaconPreloadFonts.getFontFaceRules();
+            const result = await beaconPreloadFonts.getFontFaceRules();
             
             // Should log error and return empty object
             assert.ok(beaconPreloadFonts.logger.logMessage.called, 'Should log the error');
             assert.deepStrictEqual(result, {}, 'Should return empty object on error');
         });
         
-        it('should deduplicate URLs for the same font family', function() {
+        it('should deduplicate URLs for the same font family', async function() {
             // Create two rules with DIFFERENT URLs
             const rule1 = createMockFontFaceRule('Duplicate', 'url("fonts/normal.woff2")', '400', 'normal');
             const rule2 = createMockFontFaceRule('Duplicate', 'url("fonts/bold.woff2")', '700', 'normal');
@@ -479,11 +736,267 @@ describe('BeaconPreloadFonts', () => {
               cssRules: [rule1, rule2]
             }];
             
-            const result = beaconPreloadFonts.getFontFaceRules();
+            const result = await beaconPreloadFonts.getFontFaceRules();
             
             assert.strictEqual(result['Duplicate'].urls.length, 2, 'Should have two different URLs');
             assert.strictEqual(result['Duplicate'].variations.length, 2, 'Should have two variations');
-          });
+        });
+
+        it('should process font-face rules in @imported stylesheets', async function() {
+            // Mock CSSImportRule constructor
+            global.CSSImportRule = function() {};
+            // Create a CSSImportRule instance and attach a nested stylesheet
+            const importRule = Object.create(CSSImportRule.prototype);
+            importRule.styleSheet = {
+                href: null,
+                cssRules: [
+                    createMockFontFaceRule('ImportedFont', 'url("fonts/imported.woff2")', '300', 'italic')
+                ]
+            };
+            // Set document.styleSheets to include our import rule
+            document.styleSheets = [{
+                href: null,
+                cssRules: [importRule]
+            }];
+
+            const result = await beaconPreloadFonts.getFontFaceRules();
+
+            // Assertions for imported font
+            assert.ok(result['ImportedFont'], 'Should include ImportedFont from @import');
+            assert.strictEqual(result['ImportedFont'].urls.length, 1, 'ImportedFont should have one URL');
+            assert.strictEqual(result['ImportedFont'].variations[0].weight, '300', 'ImportedFont should have correct weight');
+            assert.strictEqual(result['ImportedFont'].variations[0].style, 'italic', 'ImportedFont should have correct style');
+        });
+
+        it('should process @import statements in inline <style> tags', async function() {
+            // Mock fetch for the @import URL
+            global.fetch = sinon.stub().resolves({
+                ok: true,
+                text: () => Promise.resolve(`
+                    @font-face {
+                        font-family: 'Inline Imported Font';
+                        src: url('https://fonts.example.com/inline-imported.woff2');
+                        font-weight: 500;
+                        font-style: normal;
+                    }
+                `)
+            });
+
+            // Create proper mock font-face rule
+            const mockFontFaceRule = createMockFontFaceRule('Inline Imported Font', 'url("https://fonts.example.com/inline-imported.woff2")', '500', 'normal');
+
+            // Mock CSSStyleSheet for the temporary sheet creation
+            global.CSSStyleSheet = sinon.stub().returns({
+                replaceSync: sinon.stub(),
+                cssRules: [mockFontFaceRule]
+            });
+
+            // Mock inline style element with @import
+            const mockStyleElement = {
+                textContent: `
+                    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700');
+                    body { font-family: 'Roboto', sans-serif; }
+                `
+            };
+
+            // Mock document.querySelectorAll for style elements
+            const originalQuerySelectorAll = document.querySelectorAll;
+            document.querySelectorAll = sinon.stub().callsFake(selector => {
+                if (selector === 'style') {
+                    return [mockStyleElement];
+                }
+                return originalQuerySelectorAll.call(document, selector);
+            });
+
+            // Empty stylesheets for this test
+            document.styleSheets = [];
+
+            beaconPreloadFonts.cleanUrl = sinon.stub().callsFake(url => url.split('?')[0]);
+
+            const result = await beaconPreloadFonts.getFontFaceRules();
+
+            // Verify the @import font was processed
+            assert.ok(result['Inline Imported Font'], 'Should have processed font from inline @import');
+            assert.strictEqual(result['Inline Imported Font'].urls.length, 1, 'Should have one URL');
+            assert.strictEqual(result['Inline Imported Font'].urls[0], 'https://fonts.example.com/inline-imported.woff2', 'Should have correct URL');
+            assert.strictEqual(result['Inline Imported Font'].variations.length, 1, 'Should have one variation');
+            assert.strictEqual(result['Inline Imported Font'].variations[0].weight, '500', 'Should have correct weight');
+
+            // Verify fetch was called for the @import URL
+            assert.ok(global.fetch.calledWith('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700'), 'Should fetch @import URL');
+
+            // Cleanup
+            document.querySelectorAll = originalQuerySelectorAll;
+        });
+
+        it('should process @import statements in external CSS files', async function() {
+            // Mock fetch for both the main CSS file and the @import URL
+            global.fetch = sinon.stub();
+            
+            // First call: fetch the main CSS file containing @import
+            global.fetch.onFirstCall().resolves({
+                ok: true,
+                text: () => Promise.resolve(`
+                    @import url('https://fonts.googleapis.com/css2?family=External+Font:wght@300;600');
+                    .my-class { color: red; }
+                `)
+            });
+
+            // Second call: fetch the @import URL
+            global.fetch.onSecondCall().resolves({
+                ok: true,
+                text: () => Promise.resolve(`
+                    @font-face {
+                        font-family: 'External Font';
+                        src: url('https://fonts.gstatic.com/external-font-300.woff2');
+                        font-weight: 300;
+                        font-style: normal;
+                    }
+                    @font-face {
+                        font-family: 'External Font';
+                        src: url('https://fonts.gstatic.com/external-font-600.woff2');
+                        font-weight: 600;
+                        font-style: normal;
+                    }
+                `)
+            });
+
+            // Create proper mock font-face rules
+            const mockFontFaceRule1 = createMockFontFaceRule('External Font', 'url("https://fonts.gstatic.com/external-font-300.woff2")', '300', 'normal');
+            const mockFontFaceRule2 = createMockFontFaceRule('External Font', 'url("https://fonts.gstatic.com/external-font-600.woff2")', '600', 'normal');
+
+            // Mock CSSStyleSheet constructor to return a sheet with our font-face rules
+            global.CSSStyleSheet = sinon.stub().returns({
+                replaceSync: sinon.stub(),
+                cssRules: [mockFontFaceRule1, mockFontFaceRule2]
+            });
+
+            // Mock external stylesheet that will trigger CORS fallback
+            const mockExternalStylesheet = {
+                href: 'https://example.com/styles.css',
+                get cssRules() {
+                    // Simulate CORS/SecurityError
+                    const error = new Error('Cannot access cssRules of cross-origin stylesheet');
+                    error.name = 'SecurityError';
+                    throw error;
+                }
+            };
+
+            document.styleSheets = [mockExternalStylesheet];
+
+            beaconPreloadFonts.cleanUrl = sinon.stub().callsFake(url => url.split('?')[0]);
+
+            const result = await beaconPreloadFonts.getFontFaceRules();
+
+            // Verify the @import font was processed from external CSS
+            assert.ok(result['External Font'], 'Should have processed font from external CSS @import');
+            assert.strictEqual(result['External Font'].urls.length, 2, 'Should have two URLs (300 and 600 weight)');
+            assert.ok(
+                result['External Font'].urls.includes('https://fonts.gstatic.com/external-font-300.woff2'),
+                'Should include 300 weight font URL'
+            );
+            assert.ok(
+                result['External Font'].urls.includes('https://fonts.gstatic.com/external-font-600.woff2'),
+                'Should include 600 weight font URL'
+            );
+            assert.strictEqual(result['External Font'].variations.length, 2, 'Should have two variations');
+
+            // Verify fetch was called for both the main CSS and @import URL
+            assert.ok(global.fetch.calledWith('https://example.com/styles.css'), 'Should fetch main CSS file');
+            assert.ok(
+                global.fetch.calledWith('https://fonts.googleapis.com/css2?family=External+Font:wght@300;600'),
+                'Should fetch @import URL'
+            );
+        });
+
+        it('should handle @import chains (basic level)', async function() {
+            // Note: This test verifies basic @import processing. 
+            // Full nested chain processing would require more complex implementation.
+            global.fetch = sinon.stub();
+            
+            // First call: Main CSS with @import
+            global.fetch.onFirstCall().resolves({
+                ok: true,
+                text: () => Promise.resolve(`@import url('level2.css');`)
+            });
+
+            // Second call: Level 2 CSS with font-face
+            global.fetch.onSecondCall().resolves({
+                ok: true,
+                text: () => Promise.resolve(`
+                    @font-face {
+                        font-family: 'Chain Font';
+                        src: url('chain-font.woff2');
+                        font-weight: 400;
+                        font-style: normal;
+                    }
+                `)
+            });
+
+            // Create mock font-face rule
+            const mockFontFaceRule = createMockFontFaceRule('Chain Font', 'url("https://example.com/chain-font.woff2")', '400', 'normal');
+
+            // Mock CSSStyleSheet to return the font-face rule
+            global.CSSStyleSheet = sinon.stub().returns({
+                replaceSync: sinon.stub(),
+                cssRules: [mockFontFaceRule]
+            });
+
+            // Mock URL constructor for relative URL resolution
+            const originalURL = global.URL;
+            global.URL = sinon.stub().callsFake((url, base) => {
+                if (url.startsWith('http')) return { href: url };
+                return { href: `https://example.com/${url}` };
+            });
+
+            // Mock stylesheet with CORS error to trigger fallback
+            document.styleSheets = [{
+                href: 'https://example.com/main.css',
+                get cssRules() { 
+                    const error = new Error('CORS');
+                    error.name = 'SecurityError';
+                    throw error;
+                }
+            }];
+
+            beaconPreloadFonts.cleanUrl = sinon.stub().callsFake(url => url.split('?')[0]);
+
+            const result = await beaconPreloadFonts.getFontFaceRules();
+
+            assert.ok(result['Chain Font'], 'Should process @import chain');
+            assert.strictEqual(result['Chain Font'].urls[0], 'https://example.com/chain-font.woff2', 'Should have correct URL');
+            assert.ok(global.fetch.callCount >= 2, 'Should make at least 2 fetch calls for @import chain');
+
+            // Verify the fetch calls
+            assert.ok(global.fetch.calledWith('https://example.com/main.css'), 'Should fetch main CSS');
+            assert.ok(global.fetch.calledWith('https://example.com/level2.css'), 'Should fetch level 2 CSS');
+        });
+
+        // Test for regression fix: ensure no duplicate/corrupted URLs are returned
+        it('should extract only the first URL from font src to prevent duplicates (regression fix)', async function() {
+            // This test ensures the fix for the Playfair font duplicate URL issue
+            const fontFaceRule = createMockFontFaceRule(
+                'Playfair Display', 
+                'url("https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDTbtPK-F2qC0usEw.woff2") format("woff2"), url("https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtPK-F2qC0s.woff2") format("woff2")',
+                '400',
+                'normal'
+            );
+            
+            document.styleSheets = [{
+                href: null,
+                cssRules: [fontFaceRule]
+            }];
+            
+            const result = await beaconPreloadFonts.getFontFaceRules();
+            
+            assert.ok(result['Playfair Display'], 'Should have Playfair Display font');
+            assert.strictEqual(result['Playfair Display'].urls.length, 1, 'Should have only one URL to prevent duplicates');
+            assert.strictEqual(
+                result['Playfair Display'].urls[0], 
+                'https://fonts.gstatic.com/s/playfairdisplay/v39/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDTbtPK-F2qC0usEw.woff2', 
+                'Should extract only the first (complete) URL'
+            );
+        });
     });
 
     describe('_initializeExternalFontSheets', () => {
@@ -522,9 +1035,44 @@ describe('BeaconPreloadFonts', () => {
         let originalQuerySelectorAll;
         let originalFetch;
         let originalCSSStyleSheet;
+        let originalLocation;
+        let originalURL;
         beforeEach(() => {
             // Mock CSSRule.FONT_FACE_RULE
             global.CSSRule = { FONT_FACE_RULE: 5 };
+            
+            // Mock window.location.href to have a different origin than the Google Fonts link
+            originalLocation = global.window?.location;
+            global.window = global.window || {};
+            global.window.location = {
+                href: 'https://example.com/test-page'
+            };
+            
+            // Mock the URL constructor to handle the origin comparison properly
+            originalURL = global.URL;
+            global.URL = function(url, base) {
+                if (url === 'https://example.com/test-page') {
+                    return {
+                        href: 'https://example.com/test-page',
+                        origin: 'https://example.com'
+                    };
+                }
+                if (url === 'https://fonts.googleapis.com/css?family=Roboto') {
+                    return {
+                        href: 'https://fonts.googleapis.com/css?family=Roboto',
+                        origin: 'https://fonts.googleapis.com'
+                    };
+                }
+                if (url === 'https://example.com/same-origin.css') {
+                    return {
+                        href: 'https://example.com/same-origin.css',
+                        origin: 'https://example.com'
+                    };
+                }
+                // Fallback for any other URL
+                return originalURL ? new originalURL(url, base) : { href: url, origin: url.split('/').slice(0, 3).join('/') };
+            };
+            
             // Mock document.querySelectorAll to return fake link elements
             originalQuerySelectorAll = global.document.querySelectorAll;
             global.document.querySelectorAll = sinon.stub().returns([
@@ -564,6 +1112,12 @@ describe('BeaconPreloadFonts', () => {
             global.document.querySelectorAll = originalQuerySelectorAll;
             global.fetch = originalFetch;
             global.CSSStyleSheet = originalCSSStyleSheet;
+            global.URL = originalURL;
+            if (originalLocation) {
+                global.window.location = originalLocation;
+            } else {
+                delete global.window.location;
+            }
         });
 
         it('should fetch, parse, and return external font CSS as styleSheets and fontPairs', async () => {
@@ -586,5 +1140,53 @@ describe('BeaconPreloadFonts', () => {
             assert.deepStrictEqual(result.styleSheets, []);
             assert.deepStrictEqual(result.fontPairs, {});
         });
+        
+        it('should exclude links based on external_font_exclusions config', async () => {
+            // Update the config to exclude fonts.googleapis.com
+            beaconPreloadFonts.config.external_font_exclusions = ['fonts.googleapis.com'];
+            
+            const result = await beaconPreloadFonts.externalStylesheetsDoc();
+            
+            // Should return empty arrays since the Google Fonts link should be excluded
+            assert.strictEqual(result.styleSheets.length, 0);
+            assert.deepStrictEqual(result.fontPairs, {});
+        });
+
+        it('should exclude links based on preload_fonts_exclusions config (backward compatibility)', async () => {
+            // Set preload_fonts_exclusions to exclude domain
+            beaconPreloadFonts.config.preload_fonts_exclusions = ['fonts.googleapis.com'];
+            beaconPreloadFonts.config.external_font_exclusions = []; // explicitly empty
+            
+            const result = await beaconPreloadFonts.externalStylesheetsDoc();
+            
+            // Should exclude the link since preload_fonts_exclusions can also contain domains
+            assert.strictEqual(result.styleSheets.length, 0);
+            assert.deepStrictEqual(result.fontPairs, {});
+        });
+        
+        it('should process links from different origins only', async () => {
+            // Set up links with same and different origins
+            global.document.querySelectorAll = sinon.stub().returns([
+                { href: 'https://example.com/same-origin.css', rel: 'stylesheet' }, // Same origin as window.location
+                { href: 'https://fonts.googleapis.com/css?family=Roboto', rel: 'stylesheet' }, // Different origin
+            ]);
+            
+            // Mock fetch to handle multiple calls
+            global.fetch = sinon.stub();
+            global.fetch.onFirstCall().resolves({
+                ok: true,
+                text: () => Promise.resolve('@font-face { font-family: "Roboto"; src: url("https://fonts.gstatic.com/s/roboto.woff2"); font-weight: 400; font-style: normal; }')
+            });
+            
+            const result = await beaconPreloadFonts.externalStylesheetsDoc();
+            
+            // Should only process the external origin link, not the same-origin one
+            assert.strictEqual(result.styleSheets.length, 1);
+            assert.ok(result.fontPairs['https://fonts.gstatic.com/s/roboto.woff2']);
+            
+            // Verify fetch was called only once (for the external link)
+            assert.strictEqual(global.fetch.callCount, 1);
+            assert.ok(global.fetch.calledWith('https://fonts.googleapis.com/css?family=Roboto', { mode: 'cors' }));
+        });
     });
 });
\ No newline at end of file
diff --git a/test/Utils.test.js b/test/Utils.test.js
index 3462f6b..24ae035 100644
--- a/test/Utils.test.js
+++ b/test/Utils.test.js
@@ -1,4 +1,5 @@
 import assert from 'assert';
+import sinon from 'sinon';
 import BeaconUtils from '../src/Utils.js';
 import node_fetch from 'node-fetch';
 global.fetch = node_fetch;
@@ -67,4 +68,299 @@ describe('BeaconManager', function() {
         });
     });
 
+    describe('#isElementVisible', () => {
+        beforeEach(function () {
+            // Mock DOM elements and getComputedStyle
+            global.window = {
+                ...global.window,
+                getComputedStyle: sinon.stub()
+            };
+            
+            global.document = {
+                createElement: () => ({
+                    getBoundingClientRect: () => ({
+                        width: 100,
+                        height: 100
+                    })
+                })
+            };
+        });
+
+        afterEach(function () {
+            if (global.window.getComputedStyle.restore) {
+                global.window.getComputedStyle.restore();
+            }
+        });
+
+        it('should return true for visible elements', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                display: 'block',
+                visibility: 'visible',
+                opacity: '1',
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), true);
+        });
+
+        it('should return false for elements with display: none', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                display: 'none',
+                visibility: 'visible',
+                opacity: '1',
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), false);
+        });
+
+        it('should return false for elements with visibility: hidden', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                display: 'block',
+                visibility: 'hidden',
+                opacity: '1',
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), false);
+        });
+
+        it('should return false for elements with opacity: 0', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                display: 'block',
+                visibility: 'visible',
+                opacity: '0',
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), false);
+        });
+
+        it('should return false for elements with zero width', () => {
+            const element = {
+                getBoundingClientRect: () => ({
+                    width: 0,
+                    height: 100
+                })
+            };
+            
+            global.window.getComputedStyle.returns({
+                display: 'block',
+                visibility: 'visible',
+                opacity: '1',
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), false);
+        });
+
+        it('should return false for elements with zero height', () => {
+            const element = {
+                getBoundingClientRect: () => ({
+                    width: 100,
+                    height: 0
+                })
+            };
+            
+            global.window.getComputedStyle.returns({
+                display: 'block',
+                visibility: 'visible',
+                opacity: '1',
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), false);
+        });
+
+        it('should return false for elements with transparent text', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                display: 'block',
+                visibility: 'visible',
+                opacity: '1',
+                color: 'transparent',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.isElementVisible(element), false);
+        });
+    });
+
+    describe('#hasTransparentText', () => {
+        beforeEach(function () {
+            global.window = {
+                ...global.window,
+                getComputedStyle: sinon.stub()
+            };
+            
+            global.document = {
+                createElement: () => ({})
+            };
+        });
+
+        afterEach(function () {
+            if (global.window.getComputedStyle.restore) {
+                global.window.getComputedStyle.restore();
+            }
+        });
+
+        it('should return true for elements with color: transparent', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'transparent',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return true for elements with rgba color with alpha 0', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgba(255, 0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return true for elements with rgba color with alpha 0 and spaces', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgba(255, 128, 64, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return true for elements with hsla color with alpha 0', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'hsla(120, 50%, 50%, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return true for elements with 8-digit hex color ending in 00', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: '#ff000000',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return true for elements with uppercase 8-digit hex color ending in 00', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: '#FF123A00',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return true for elements with filter: opacity(0)', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgb(0, 0, 0)',
+                filter: 'blur(5px) opacity(0) brightness(100%)'
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), true);
+        });
+
+        it('should return false for elements with visible text properties', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgb(0, 0, 0)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), false);
+        });
+
+        it('should return false for elements with rgba color with non-zero alpha', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgba(255, 0, 0, 0.5)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), false);
+        });
+
+        it('should return false for elements with hsla color with non-zero alpha', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'hsla(120, 50%, 50%, 0.8)',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), false);
+        });
+
+        it('should return false for elements with 8-digit hex color not ending in 00', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: '#ff0000ff',
+                filter: ''
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), false);
+        });
+
+        it('should return false for elements with filter: opacity(1)', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgb(0, 0, 0)',
+                filter: 'blur(5px) opacity(1) brightness(100%)'
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), false);
+        });
+
+        it('should return false for elements with no filter', () => {
+            const element = global.document.createElement('div');
+            
+            global.window.getComputedStyle.returns({
+                color: 'rgb(0, 0, 0)',
+                filter: 'none'
+            });
+            
+            assert.strictEqual(BeaconUtils.hasTransparentText(element), false);
+        });
+    });
+
 });