Font URL is relative to css directory

[rnewman]

This stylesheet:

https://github.com/zwbetz-gh/cupper-hugo-theme/blob/master/assets/css/template-styles.css#L4

refers to a font in path css/fonts/:

/* Fonts */
@font-face {
    font-family: 'Miriam Libre';
    src: url('{{ "css/fonts/miriamlibre-bold.woff2" | absURL }}') format('woff2'), url('{{ "css/fonts/miriamlibre-bold.woff" | absURL }}') format('woff');
    font-weight: bold;
    font-style: normal;
}

This is built by Hugo into public/css/styles.css, where it looks like this:

/* Fonts */
@font-face {
    font-family: 'Miriam Libre';
    src: url('css/fonts/miriamlibre-bold.woff2') format('woff2'), url('css/fonts/miriamlibre-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

and Hugo puts the font directory next to it:

$ find public/css
public/css
public/css/styles.css
public/css/images
public/css/images/icon-tick.svg
public/css/images/stripe.svg
public/css/images/arrow_effect.svg
public/css/prism.css
public/css/search.fe0cd54a21628574bff49d721c827d1bb165ab56b0f22dd55ae78addbe61c309.css
public/css/fonts
public/css/fonts/miriamlibre-bold.woff2
public/css/fonts/miriamlibre-bold.woff

However, CSS paths are relative to the CSS file. That @font-face.src thus causes the browser to load css/css/fonts/miriamlibre-bold.woff2, which fails with a 404:

This does not occur using hugo server.

I'm not sure if this is a Hugo bug (because it's clearly processing the CSS and the font) or a bug in the theme, but inserting / to turn it into url('/css/fonts…') or removing css/ altogether from the url both cause correct CSS to be generated but break the behavior when loaded via hugo server.

To Reproduce

• Build an example Hugo site with this theme.
• Deploy it to Netlify or use a local HTTP server.

Expected behavior

The generated CSS refers to a correct path.

[zwbetz-gh]

Thanks for reporting this @rnewman. Am going to do some digging.

[zwbetz-gh]

Hmm. I am not able to reproduce this.

For example, I have a demo of the theme deployed to Netlify. When I view the devtools for a sample post, all is fine.

https://cupper-hugo-theme.netlify.app/cupper-shortcodes/

---

Then when I inspect the CSS, it is not as you say in your report. Instead, I see the full url for each font as expected.

https://cupper-hugo-theme.netlify.app/css/styles.css

/* Fonts */
@font-face {
    font-family: 'Miriam Libre';
    src: url('https://cupper-hugo-theme.netlify.app/css/fonts/miriamlibre-bold.woff2') format('woff2'), url('https://cupper-hugo-theme.netlify.app/css/fonts/miriamlibre-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

---

For reference, the demo is currently built with hugo version 0.83.1

https://github.com/zwbetz-gh/cupper-hugo-theme/blob/1929b7a9c5828195730ddfdcc511b562e89346aa/netlify.toml#L6

[rnewman]

I wonder if this is a consequence of the relativeURLs setting?

[zwbetz-gh]

Is your base url set in your config file?

Actually, for me to debug this further, you will need to link to your site source code, upload a zip, or at least post your config file.

On Wed, Jan 5, 2022 at 11:51 PM Richard Newman @.***> wrote:

I wonder if this is a consequence of the relativeURLs setting?

— Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/67#issuecomment-1006303515, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7EPLPUXMZI3DXWV4DLUUUUU5ANCNFSM5LLG3WTA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[rnewman]

OK, I built a repro, but I think I also figured this out.

hugo server replaces your baseURL (which causes no end of confusion for users).

It's not documented what the right value should be when deploying for multiple names (as is the case when deploying to staging, or to Netlify with and without an external DNS name) or without hardcoding a particular base URL: advice varies between the empty string, a slash, or using scripts to override it when building.

I had chosen the empty string, and everything works except for this.

Using baseURL: "/" makes my simple case work.

However, it's still not clear what the right thing should be if I were to deploy into a path, and thus need real relative URL support.

Changing the stylesheet to:

/* Fonts */
@font-face {
    font-family: 'Miriam Libre';
    src: url('{{ "../css/fonts/miriamlibre-bold.woff2" | absURL }}') format('woff2'), url('{{ "../css/fonts/miriamlibre-bold.woff" | absURL }}') format('woff');
    font-weight: bold;
    font-style: normal;
}

makes both "" and "/" work as the value of baseURL; perhaps consider changing this?

https://inspiring-franklin-01af8a.netlify.app/ is a Netlify deploy of my repro case with that commit stacked on top. The font is correct in both hugo server and in the deploy.

[zwbetz-gh]

Am glad to hear adjusting your baseURL got you further.

But we are beginning to get into a land that is out of scope for what is a "theme issue" vs what is a "general hugo issue".

In the deployed url you linked, one issue is that when you have a page that is nested a few dirs deep, the ../css/fonts/miriamlibre-bold.woff2 will no longer work.

If you'd like to debug your particular scenario further, please open a thread over at https://discourse.gohugo.io/

[rnewman]

Yes, agreed. No need to debug further — I sadly don't have time to try to futz with fundamentals of Hugo — but I thought it was worth writing up the situation for closure.

Thanks for the responses!