CSS External Files

CSS External File snippets let you load a stylesheet from a remote URL, typically a CDN, with a single line. This is the go-to type for adding Google Fonts, loading icon libraries like Font Awesome or Material Icons, including CSS frameworks like Bootstrap or Tailwind, or referencing any external stylesheet your site depends on — without hardcoding a <link> tag into your template.

How to Create a CSS External Files Snippet

To learn how to load external CSS files in Joomla, follow the steps below:

1. Log in to your Joomla administrator
2. Go to Components → Tassos Code Snippets
3. Click New
4. Enter a descriptive Title (e.g. "Load Google Fonts")
5. Select CSS External File as the Code Type.
6. Choose one of the following insertion locations
   • Site Header
   • Site Footer
   • Admin Header
   • Admin Footer
7. Enter the URLs or relative paths of the CSS files you want to load, one per line. Do not write any CSS or HTML in the editor — only plain URLs. The extension will create a <link rel="stylesheet"> tag for each URL and inject it at the chosen location.
   • To load an external file, start with https:// or http:// (e.g. https://cdn.example.com/library.css)
   • To load local files on your server, write the path without a leading slash (e.g. templates/mytemplate/css/style.css)
8. Open the Conditional Logic tab to restrict which pages or users the snippet runs on. Leave it empty to run it site-wide. Learn more in Using Snippet Logic.
9. Set Status to Published and click Save & Close.

Troubleshooting

Styles Not Applying

1. Check URL: Verify the URL is correct and accessible
2. Check HTTPS: Ensure using HTTPS, not HTTP
3. Check console: Look for errors in the browser console (F12)
4. CORS issues: Some files require crossorigin attribute
5. Cache: Clear browser cache
6. Load order: Check if styles are being overridden

Slow Page Load

1. Reduce requests: Minimize the number of external files
2. Optimize fonts: Load only needed weights and styles
3. Use system fonts: Consider using the system font stack
4. Defer non-critical: Use media queries for print styles

FOUC (Flash of Unstyled Content)

Ensure CSS is in the Header location:

• CSS should load before body content
• Critical CSS should have lower priority numbers
• Avoid loading CSS at the footer