# How to load assets from the static folder in a CSS file?

**URL:** <https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005>\
**Category:** support\
**Created:** [September 27, 2019, 1:00pm UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005 "2019-09-27T13:00:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![angelo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/angelo/32/9665_2.png) [@angelo](https://discourse.gohugo.io/u/angelo)\
**Post date:** [September 27, 2019, 1:00pm UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005/1 "2019-09-27T13:00:01Z")

</div>

Hello friends,

I’m trying to resolve an issue with the [Indigo theme](https://github.com/AngeloStavrow/indigo/) as deployed to the [themes gallery](https://themes.gohugo.io/indigo/). This is part of a deeper [audit](https://github.com/AngeloStavrow/indigo/issues/57). Right now, the gallery’s demo site does not load its custom fonts, which are bundled in the **/static/fonts** folder.

I understand _why_ it doesn’t work — in **/static/css/fonts.css** , the `@font-face` declarations look like this:

```css
@font-face {
    font-family: 'Charter';
    src: url('/fonts/charter_regular-webfont.eot');
    src: url('/fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/charter_regular-webfont.woff') format('woff'),
         url('/fonts/charter_regular-webfont.ttf') format('truetype');
    font-display: fallback;
}

```

That works great when deploying to a root domain, as you can see [here](https://hello-indigo.glitch.me). But if it’s in a subfolder, the `src: url('/fonts/fontname.ttf');` points to the domain root, which is (of course) wrong.

As I said, I understand what the problem is, but I’m struggling to find an elegant solution.

In an HTML file, I can get an asset from the theme’s **/static** folder with something like:

```auto
<img src={{ "images/site-logo.svg" | absURL }} alt="Site Logo">

```

But that doesn’t work in CSS files, for whatever reason. I _could_ use inline CSS in an HTML partial, but that feels like a very hack-y workaround. How do you all load assets from the **/static** folder in your CSS files?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [September 27, 2019, 1:53pm UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005/2 "2019-09-27T13:53:11Z")

</div>

One option is to remove all leading slashes from `head.html` and `fonts.css` and to use the `base` tag in your `head.html`:

```auto
<base href="https://domain.com/folder/">

```

Another option is to set `baseURL` to `https://domain.com/folder/` in `config` and add `RelURL` to your CSS files, e.g.

```auto
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}" />

```

In any case you will need to update the path to the font files in `fonts.css`.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [September 27, 2019, 1:53pm UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005/3 "2019-09-27T13:53:23Z")

</div>

about static

> **[Static Files](https://gohugo.io/content-management/static-files/#readout)**
>
> Files that get served \*\*statically\*\* (as-is, no modification) on the site root.

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [September 28, 2019, 9:21am UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005/4 "2019-09-28T09:21:55Z")

</div>

I think this isn’t really a Hugo issue, it’s more to do with how CSS interprets urls.

According to [W3](https://www.w3.org/TR/CSS1/#url)

> Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:

So I think if you do

```auto
    src: url('./fonts/charter_regular-webfont.eot');

```

(i.e. starting urls with a dot) then the browswer will load the font files from a relative directory, rather than working a directory based on web root.

---

<div class="post-metadata">

**Author:** ![angelo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/angelo/32/9665_2.png) [@angelo](https://discourse.gohugo.io/u/angelo)\
**Post date:** [September 28, 2019, 12:24pm UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005/5 "2019-09-28T12:24:16Z")

</div>

This was an ah-ha moment for me! I didn’t realize that the URLs would be interpreted based on the path of the stylesheet — good find. 🙂

The solution was to go up one level in the path hierarchy (since the **static/** and **css/** folder are siblings), so two dots instead of one:

```css
src: url('../fonts/charter_regular-webfont.eot');

```

Thanks everyone for your input!

---

<div class="post-metadata">

**Author:** ![reitzig](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/reitzig/32/11272_2.png) [@reitzig](https://discourse.gohugo.io/u/reitzig)\
**Post date:** [May 28, 2020, 11:56am UTC](https://discourse.gohugo.io/t/how-to-load-assets-from-the-static-folder-in-a-css-file/21005/6 "2020-05-28T11:56:24Z")

</div>

Since thas relies on the relative folder structure, one might argue that this is preferable:

```
{{ - site.BaseURL -}}/fonts/...

```

Pity that CSS doesn’t honor HTML’s `<base>`.