# CSS isn't load by subdirectories

**URL:** <https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843>\
**Category:** support\
**Created:** [October 18, 2017, 11:27am UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843 "2017-10-18T11:27:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![francoscarpa](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@francoscarpa](https://discourse.gohugo.io/u/francoscarpa)\
**Post date:** [October 18, 2017, 11:27am UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/1 "2017-10-18T11:27:15Z")

</div>

My project has this structure:

 ![50](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/e/e9415d9c94f1ed2599cec7e3a01f6f23a99dcb21.png)

My `config.toml` file have this settings:

![43](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/6/6a8f6626d5a3a96f2fe9d53b939c739b47915957.png)

When I use `hugo server` all go well, but when I build the site the `Why Computer Science is amazing` page can’t load the `cmunbmr.ttf` file. In my `baseof.html` I set:

 ![52](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/8/861947732677e47453e8ba2e86e4a7d81ffbefba.png)

What are the problems?

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [October 18, 2017, 11:50am UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/2 "2017-10-18T11:50:24Z")

</div>

> [@francoscarpa](#):
>
> What are the problems?

The problem is your URL, which is relative and obviously wrong when in subdirectories.

You need to make sure the URL is relative to the server root.

Try this:

```auto
url("{{ relURL "cmunbmr.ttf" }}")

```

Or something like that

---

<div class="post-metadata">

**Author:** ![francoscarpa](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@francoscarpa](https://discourse.gohugo.io/u/francoscarpa)\
**Post date:** [October 18, 2017, 9:06pm UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/3 "2017-10-18T21:06:08Z")

</div>

It doesn’t work. Worse, now the font doesn’t load in any web page. The code generated is `url("/cmunbmr.ttf")`, and that slash alter the correctness of the code, since it should be `url("cmunbmr.ttf")` or `url("./cmunbmr.ttf")`. Also, it remains the same in the subfolder file, so again the problem with the path still remain.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [October 18, 2017, 9:17pm UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/4 "2017-10-18T21:17:00Z")

</div>

Note that this isn’t really a “Hugo issue”, but a CSS/HTML issue.

I have not done extensive research on this, but looking at [https://www.w3.org/TR/REC-CSS1/#url](https://www.w3.org/TR/REC-CSS1/#url)

The URL in CSS is relative to its source (i.e. the stylesheet); so currently you cannot have this inline in Hugo. `relativeURLs` will not touch those URLs (this has been discussed).

So, I suggest you pull those style out into a `CSS` file (which you can link with `relURL`).

And please be a be a little more positive in your replies to people who try to help you.

---

<div class="post-metadata">

**Author:** ![francoscarpa](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@francoscarpa](https://discourse.gohugo.io/u/francoscarpa)\
**Post date:** [October 19, 2017, 7:24am UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/5 "2017-10-19T07:24:29Z")

</div>

> And please be a be a little more positive in your replies to people who try to help you

I believe I was disrespectful with no one, but if I appeared like so, I really apologize.

> So, I suggest you pull those style out into a CSS file (which you can link with relURL)

I tried and it did the trick! Thank you! Yes, my mistake was to use inline CSS, so the `url` remained the same in all the pages. Now I created a `style.css` file in the `static` folder, in which I put the `cmunbmr.ttf` also, and the link works. Thanks again!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [October 19, 2017, 7:31am UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/6 "2017-10-19T07:31:26Z")

</div>

> [@francoscarpa](#):
>
> I believe I was disrespectful with no one, but if I appeared like so, I really apologize.

No problem – I just read that your situation was “worse” after my suggestion. Which wasn’t really true as it was one step in the debug process closer to a working solution. So the situation was actually better if you look at it with positive goggles.

---

<div class="post-metadata">

**Author:** ![francoscarpa](https://avatars.discourse-cdn.com/v4/letter/f/a87d85/32.png) [@francoscarpa](https://discourse.gohugo.io/u/francoscarpa)\
**Post date:** [October 19, 2017, 8:04am UTC](https://discourse.gohugo.io/t/css-isnt-load-by-subdirectories/8843/7 "2017-10-19T08:04:46Z")

</div>

This proves that the path to become a good programmer is, in my case, still long 😉 Thanks again!