How to load fonts and images in production?

support
, ,
1

Hi guys, I’m Hugo first-time user and I’m having a problem loading the fonts and images in production on GitHub Pages.

Right now I’m working on the index/landing layouts/index.html page and while everything works fine locally I can’t get fonts and images loaded in production cause of the 404 I’m getting due to the wrong path.

I attempted to resolve this by reviewing the documentation and community forum, but was unsuccessful. Thus, I am creating this topic.

Repository tree :right_arrow_curving_down:

├── archetypes
│   └── default.md
├── assets
│   └── sass
│       ├── base
│       │   ├── _footer.scss
│       │   ├── _header.scss
│       │   └── _main.scss
│       ├── main.scss
│       └── utils
│           ├── _breakpoints.scss
│           └── _fonts.scss
├── config
│   ├── _default
│   │   └── hugo.toml
│   └── production
│       └── hugo.toml
├── content
│   └── _index.md
├── data
├── i18n
├── layouts
│   ├── _default
│   │   ├── baseof.html
│   │   └── taxonomy.html
│   ├── index.html
│   └── partials
│       ├── dartsass.html
│       ├── footer.html
│       ├── head.html
│       └── header.html
├── node_modules
│   └── @picocss
│       └── ...
├── package-lock.json
├── package.json
├── public
├── static
│   ├── fonts
│   │   ├── ...
│   └── images
│       ├── ...
└── themes

Production config :right_arrow_curving_down:
config/production/hugo.toml
baseURL = "https://<username>.github.io/<repo-name>/"

Images path :right_arrow_curving_down:
layouts/index.html
<img src="{{ "/images/<image-name>" | relURL }}" />

Fonts path :right_arrow_curving_down:
assets/sass/main.scss

@font-face {
  font-family: "Arvo";
  src: url("/fonts/Arvo-Bold.eot");
  src: url("/fonts/Arvo-Bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Arvo-Bold.woff2") format("woff2"),
    url("/fonts/Arvo-Bold.woff") format("woff"),
    url("/fonts/Arvo-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
...

Thank you.

2

You are serving your site from a subdirectory:

https://example.org/foo/

But the URLs you show above are relative to the server root. Search the documentation for relURL.

3

I changed relURL to absURL, but I still have the same issue with the images.

4

Please post a link to your project’s Git repository.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

5

I did it.

The solution is omitting the forward slash when it comes to the src path.

layouts/index.html

<img src="{{ "/images/<image-name>" | absURL }}" />
:down_arrow:
<img src="{{ "images/<image-name>" | absURL }}" />

For the fonts, the solution is to back out on one level.

assets/sass/main.scss

@font-face {
  font-family: "Arvo";
  src: url("/fonts/Arvo-Bold.eot");
  src: url("/fonts/Arvo-Bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Arvo-Bold.woff2") format("woff2"),
    url("/fonts/Arvo-Bold.woff") format("woff"),
    url("/fonts/Arvo-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
...

:down_arrow:

@font-face {
  font-family: "Arvo";
  src: URL("../fonts/Arvo-Bold.eot");
  src: URL("../fonts/Arvo-Bold.eot?#iefix") format("embedded-opentype"),
    URL("../fonts/Arvo-Bold.woff2") format("woff2"),
    URL("../fonts/Arvo-Bold.woff") format("woff"),
    URL("../fonts/Arvo-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
...
6

For the fonts, it all depends on the location of the CSS and the font files relative to each other. A relative font path in the CSS is interpreted relative to the CSS’ location.