Cannot load fonts, but works locally

support
1

Hi, I’m new to hugo. I’m using the tomfran’s typo theme to create my personal webpage.
I’m using Github Pages.

Effectively, I’m not able to get any fonts loaded. The developer console indicates that the filepaths for all fonts is a 404:

GET https://neel04.github.io/fonts/Monaspace/MonaspaceArgon-Regular.woff  
  net::ERR_ABORTED 404 (Not Found)

Which I can confirm by checking the link.

However, when building hugo locally - everything works as expected. The /public directory does contain /fonts which is accessible by the theme’s filepaths:

fonts.css

@font-face {
    font-family: 'Monaspace';
    src: url('/fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

And since the baseURL = https://neel04.github.io/my-website/ then the filepaths should work out. For example, baseURL + favicon.ico does work indicating that hugo does resolve some paths correctly :thinking:

image
image312×616 23.6 KB

And as you can see, locally its building the website perfectly, as hugo server confirms.
So I’m confused how to debug this issue that I can’t even reproduce locally :man_shrugging:

Any help is highly appreciated here!

Website: Neel Gupta
Code: GitHub - neel04/my-website: Code for my website

2

You are serving the site fro. A subfolder not the root of your domain.

So /fonts refers to domain/fonts not /domain/my-website/fonts

3

But the baseURL = https://neel04.github.io/my-website/ includes the my-website/ suffix, so wouldn’t the contenation /fonts include my-website? :thinking:

Maybe I’m mixing up how baseURL works. How can I fix it not being deployed from a subfolder?

4

With github pages you cannot.

your url is in a css file. Ang I guess it’s in your static folder. So the css is copied verbatim to your site. No evaluation of the baseURL.

With that no way except adding the subfolder there. And use hugo server with the -baseURL parameter in development

Check out this one and choose:

2 Likes
5

you could use a relative URL that takes you from the location of your CSS (I can’t see that from your screenshot). Maybe something like ../fonts/.... But you should be able to figure that out.

1 Like
6

That works perfectly. Thank you so much @irkode and @chrillek for explaining the problems.

I chose to hardcode the URLs relatively in the end, because canonifying URLs breaks the entire theme so I’ll proceed with this hack for now :slight_smile:

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.