---
title: "CSS External Files - Tassos Code Snippets"
description: "Include external CSS stylesheets from CDNs or remote servers for additional styling options."
url: "https://www.tassos.gr/docs/code-snippets/types/css-external-files"
date: "2026-04-29T06:44:22+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Tassos Code Snippets ](https://www.tassos.gr/index.php?option=com_content&view=category&id=120) / [ Snippet Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=122)

#  CSS External Files

##  Include external CSS stylesheets from CDNs or remote servers for additional styling options.

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](#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 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.
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](https://www.tassos.gr/docs/tassos-code-snippets/functionality/conditional-logic).
9. Set Status to Published and click Save &amp; Close.

## [Troubleshooting](#troubleshooting)

### [Styles Not Applying](#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](#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)](#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

 Last updated on Mar 3rd 2026 15:03

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Tassos Code Snippets",
            "item": "https://www.tassos.gr/docs/code-snippets"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Snippet Types",
            "item": "https://www.tassos.gr/docs/code-snippets/types"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "CSS External Files",
            "item": "https://www.tassos.gr/docs/code-snippets/types/css-external-files"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/code-snippets/types/css-external-files"
    },
    "headline": "CSS External Files",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/code-snippets/types/css-external-files"
    },
    "datePublished": "2026-03-02T18:17:32+02:00",
    "dateCreated": "2026-03-02T18:17:32+02:00",
    "dateModified": "2026-03-03T15:34:10+02:00"
}
```