How can I remove or call third-party CSS on my Webflow website’s source code that I didn't add myself?
TL;DR
- Audit Webflow Project Settings, Embed elements, and third-party scripts for injected CSS.
- Use DevTools to trace CSS origins and test in incognito to rule out browser extensions.
Third-party CSS files sometimes appear in your Webflow site’s source code even if you didn’t explicitly include them. These can be results of integrations, browser extensions, or code injected through Webflow's settings.
1. Audit Webflow Project Settings
- Go to Project Settings → Custom Code tab.
- Look under both the Head Code and Footer Code sections for any
<link>or<style>tags referencing third-party CSS files. - Remove or comment out any unfamiliar code.
- Check also under the Integrations tab if you've connected services like Google Optimize or Facebook Pixel, as these can inject CSS/JS indirectly.
2. Check Embedded Code in Pages
- Open the Webflow Designer and check each page for Embed elements.
- These embed elements (usually using the HTML Embed block) might include external stylesheets or scripts.
- Remove any links to third-party stylesheets unless explicitly needed.
3. Review Third-party Scripts
- JavaScript scripts (like chat widgets, analytics tools, etc.) often inject CSS.
- Audit any custom scripts you've added and check their documentation to see if they add stylesheets.
- You can test by temporarily removing the script link from Custom Code and publishing the site to isolate the source.
4. Disable Browser Extensions
- Some browser extensions, like ad blockers or design audits, can inject temporary CSS into your preview or even published site views.
- Open your published Webflow site in an incognito window with all extensions turned off to confirm whether the styles are truly in the hosted source.
5. Use DevTools to Trace the CSS Source
- Open your published site and inspect the browser’s Developer Tools (DevTools).
- Go to the Sources tab and locate the unwanted CSS file to see its origin.
- If the source is a third-party domain or a script, trace it back to where it might be added in your Webflow project.
6. Use the Webflow Clean-Up Tools
- In Designer, go to Navigator and remove unused styles, classes, and custom elements.
- This step won’t remove third-party CSS but reduces clutter and helps detect third-party code more easily.
Summary
To remove or track down unwanted third-party CSS in Webflow, audit your Custom Code, Embed elements, and third-party scripts, then use DevTools to trace the source. Also, verify whether browser extensions might be injecting the code temporarily.