Where do self-hosted fonts in themes go?

Using Themes
1

I can’t get my custom theme’s scss to load my fonts.

My themes/theme/assets/sass/main.scss file:

@font-face {
  font-family: "Title";
  font-weight: 400;
  src: url("../fonts/Mohave-Regular.woff2") format("woff2");
}

The above works, when I inspect the website, it’s trying to load the font but it gives a 404 error because it can’t find it.

I’ve tried including it in:

  • themes/theme/static/fonts/Mohave-Regular.woff2
  • themes/theme/assets/fonts/Mohave-Regular.woff2
  • themes/theme/data/fonts/Mohave-Regular.woff2

But none of them work.

It does work if I include it in the site’s root folder – so it’s not a problem with the font, my browser, the path in the scss – but I don’t want that.

I want it as part of the theme.

As I understand, the theme/static folder merges with the site’s root static folder, right? So if there’s no fonts folder in the root, it shouldn’t be overriding the theme’s version, right? So why isn’t it including it?

2

Related: https://discourse.gohugo.io/t/link-a-font-face-in-a-scss-to-the-right-folder/34292

1 Like
3

Can’t look at my notes right now but if you place the font here, it should be accessible at /fonts/Mohave-Regular.woff2

4

Hey! @brunoamaral thanks for the answer. Did you get a chance to look at your notes?

Neither assets nor static are working for me, both at “…/fonts/” nor at “/fonts/”

Any other ideas?

5

Hi @jmooring , thanks for the link.

I had a look through it, and while your answer works when I include the fonts in the site’s root static folder, it doesn’t seem to apply for the theme itself. I mentioned this in the original question.

Maybe this is a Hugo limitation? I can’t store fonts within the theme?

Can you think of a workaround? Or am I missing something?

Thanks!

6

As always, it’s a lot easier to work through these questions when we have all the details. Can you share a link to the public repository for your project?

See https://discourse.gohugo.io/t/requesting-help/9132.

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.

Thanks!

7

Sure @jmooring! I thought I was providing enough context, but here is the theme I’m creating: GitHub - danniel3/danfolio: Minimalist Personal Portfolio Website for Hugo

8

So after studying tons of other themes (their scss, fonts, heads, etc.) that were doing EXACTLY the same thing that I was doing… I realized what I wasn’t doing.

When you add local fonts to a LIVE rendered site, you actually need to restart it.

I guess they get loaded into the resources, and then don’t get reloaded.

Leaving this here in case anyone else runs into the same issue.

1 Like
9

Put them into static/assets/webfonts/webfontname and link with /assets/webfonts/webfontname. Don’t overthink it.

10

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