CSS isn't load by subdirectories

My project has this structure:

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:

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:

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

Or something like that

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.

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.

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

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.

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

1 Like