CSS isn't load by subdirectories

support
1

My project has this structure:

50
Schermata 2017-10-18 alle 13.26.50.png622×730 53.8 KB

My config.toml file have this settings:

43

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
Schermata 2017-10-18 alle 13.31.52.png862×554 45.1 KB

What are the problems?

2

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:

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

Or something like that

3

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.

4

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

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.

5

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!

1 Like
6

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.

7

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

1 Like