How do I reference font paths in my style.css?

General
1

I am adding some custom web fonts like JetBrains Mono, and they’re in my assets/fonts folder. Do I literally just reference them like src: url(/assets/fonts/JetBrainsMono-Regular.woff2);?

Or is there a recommended method to do this?

2 
404 not found
This path does exist but it was never referenced in the build!

Is the error I get if requesting the font at /fonts/foobarbaz.woff2. I suppose I might need to add it to zine.ziggy?

3 
diff --git a/assets/style.css b/assets/style.css
index 60f8883..f43f5a8 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,3 +1,9 @@
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('fonts/JetBrainsMono-Regular.woff2');
+}
+
+
 h1,
 h2,
 h3,
@@ -18,7 +24,7 @@ a {
 html {
   color: #ccc;
   font-size: 1.2em;
-  font-family: monospace;
+  font-family: 'JetBrains Mono', monospace;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -120,4 +126,4 @@ li {

 /* .project-headline a {

-} */
\ No newline at end of file
+} */
diff --git a/zine.ziggy b/zine.ziggy
index fe48539..73e3fc5 100644
--- a/zine.ziggy
+++ b/zine.ziggy
@@ -7,5 +7,6 @@
     .assets_dir_path = "assets",
     .static_assets = [
         "Temml.woff2",
+        "fonts",
     ],
 }),

I just had to add fonts to my static_assets, then the src for the font does not want a leading /assets.

Thanks to Loris for the cool SSG.

4

Yes these URLs depend on the final shape that the output will take and unfortunately there is no nice way to express these output paths in a parametrized way, as Zine is currently not able to template CSS.

I don’t know if I’m going to go that deep into the rabbit hole though. We’ll see.