-
Notifications
You must be signed in to change notification settings - Fork 189
Font URL is relative to css directory #67
Comments
Thanks for reporting this @rnewman. Am going to do some digging. |
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 cupper-hugo-theme/netlify.toml Line 6 in 1929b7a
|
I wonder if this is a consequence of the relativeURLs setting? |
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
<#67 (comment)>,
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:
***@***.***>
|
OK, I built a repro, but I think I also figured this out.
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 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 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 |
Am glad to hear adjusting your 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 If you'd like to debug your particular scenario further, please open a thread over at https://discourse.gohugo.io/ |
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! |
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/
:This is built by Hugo into
public/css/styles.css
, where it looks like this:and Hugo puts the font directory next to it:
However, CSS paths are relative to the CSS file. That
@font-face.src
thus causes the browser to loadcss/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 intourl('/css/fonts…')
or removingcss/
altogether from theurl
both cause correct CSS to be generated but break the behavior when loaded viahugo server
.To Reproduce
Expected behavior
The generated CSS refers to a correct path.
The text was updated successfully, but these errors were encountered: