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.
To learn how to load external CSS files in Joomla, follow the steps below:
- Log in to your Joomla administrator
- Go to Components → Tassos Code Snippets
- Click New
- Enter a descriptive Title (e.g. "Load Google Fonts")
- Select CSS External File as the Code Type.
- Choose one of the following insertion locations
- Site Header
- Site Footer
- Admin Header
- Admin Footer
- Enter the URL(s) 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.
- 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.
- Set Status to Published and click Save & Close.
- Check URL: Verify the URL is correct and accessible
- Check HTTPS: Ensure using HTTPS, not HTTP
- Check console: Look for errors in the browser console (F12)
- CORS issues: Some files require
crossorigin attribute
- Cache: Clear browser cache
- Load order: Check if styles are being overridden
- Reduce requests: Minimize the number of external files
- Optimize fonts: Load only needed weights and styles
- Use system fonts: Consider using the system font stack
- Defer non-critical: Use media queries for print styles
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
Rated: 