Where to put static content? (Fonts, specifically)

[dei-layborer]

Documentation Issue

I'm assuming this is a documentation thing rather than a bug with Zola.

I'd like to include my own font files with the site, and include them via a CSS @font-face rule. However, it's not clear how to do this. I've created the rule in the top-level scss file for the theme I'm using, and tried putting the font files themselves in multiple directories within the site (for example, /static/ both in the site itself and the theme's subdirectory). No matter what, when viewing the site via zola serve, the font files don't load (they 404).

I also tried the same process using zola build, but the site itself broke due to a host of OpaqueResponseBlocking issues from within Firefox. I don't know if it's related.

Anyway, my assumption as I said is not that this is something Zola can't do at all, just that I haven't figured out how to do it. Meanwhile, the documentation is, as far as I can tell, entirely silent on how this works.

[Keats]

They should go in the static folder: https://www.getzola.org/documentation/getting-started/directory-structure/#static

[dei-layborer]

Okay, but as I explained in my original post, this 404's.

[Keats]

Do you have a repo showing the minimum site having the issue? If you build the site and check the public folder, do you see the font in there? What's the path used in the font-face?

[dei-layborer]

I do see the font files in there when building the site, but I can't test it because none of the content will load due to OpaqueResponseBlocking errors.

[vilhelmgray]

I don't know whether the OpaqueResponseBlocking errors are related, but here's how I accomplish this on my site if it helps you:

• static/fonts/SourceHanSansJP-VF.otf.woff2: My woff2 font file.
• static/style/shared.css:

@font-face {
  font-family: "Source Han Sans JP VF";
  src: local("Source Han Sans JP VF"),
       url(../fonts/SourceHanSansJP-VF.otf.woff2) format("woff2");
}

...

:lang(ja) {
  font-family: "Source Han Sans JP VF";
}

• templates/base.html:

...
    <link rel="stylesheet" href="{{ get_url(path='style/shared.css') }}">
...

[matthillco]

@dei-layborer Have you added the string /static/ into your CSS for loading fonts? The static folder represents your site root, so that won't actually be in the file tree for the built site. Try removing any occurence of 'static' from your paths.

I use custom fonts all the time in my Zola sites and there's no issue with them, I put the fonts in a fonts subfolder in static, then in my CSS I specify '/fonts/name-of-font.woff2' and they load fine.

[dei-layborer]

@dei-layborer Have you added the string /static/ into your CSS for loading fonts? The static folder represents your site root, so that won't actually be in the file tree for the built site. Try removing any occurence of 'static' from your paths.

I use custom fonts all the time in my Zola sites and there's no issue with them, I put the fonts in a fonts subfolder in static, then in my CSS I specify '/fonts/name-of-font.woff2' and they load fine.

Hi -- thank you for the reply, and apologies for the delayed response.

To clarify, which static folder are you referring to? Because the site (when not built, at least) has two: one in the site's root directly, and a second one in the theme's directory.