Unable to Properly Link Local Typeface on Github Pages

support
1

Hey folks,

Pretty new to Hugo, and having a lot of fun, but finding it a little impossible to properly link some typeface files within my build. I have the files in static/fonts, and linked as such in my css file:

@font-face {
  font-family: GortonRegular;
  src: local('GortonDigitalRegular'),
  url('/fonts/GortonDigitalRegular.otf') format("opentype");
}

Have tried every variation of pathing, but can’t seem to get the public files to find my typefaces. Repo is here, for reference.

Help!

2

Not related to your question. But you need to add the public folder in your .gitignore file.

3

In your repo, you have this (in public/main.css):

@font-face {
  font-family: GortonRegular;
  src: url("fonts/GortonDigitalRegular.otf");
}

So, the CSS is referring to public/fonts/main.css. Which doesn’t exist. I’m not going to delve deeper, as your site structure is not what is recommended:

Please remove public from your repo and move the stuff under themes (like static etc) to where it should be.

4

You have two problems:

  1. You are serving your site from a subdirectory, and URLs beginning with / are relative to the server root, not the site root.
  2. The font-family value in your font-face declaration does not match the font-family that you set for the body element.

Fix:

diff --git a/themes/nosoapradio-theme/assets/css/main.css b/themes/nosoapradio-theme/assets/css/main.css
index 482c8ee..77472c8 100644
--- a/themes/nosoapradio-theme/assets/css/main.css
+++ b/themes/nosoapradio-theme/assets/css/main.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: GortonRegular;
   src: local('GortonDigitalRegular'),
-  url('/fonts/GortonDigitalRegular.otf') format("opentype");
+  url('/nosoapradio/fonts/GortonDigitalRegular.otf') format("opentype");
 }
 
 html body {
@@ -17,7 +17,7 @@ html body {
 
 body {
   background-color: ivory;
-  font-family: 'GortonDigitalRegular', monospace;
+  font-family: 'GortonRegular', monospace;
 }
 
 /* Globals */
@@ -277,7 +277,7 @@ td:last-child {
 
 .blinking {
   animation: 2s blink ease infinite;
-  
+
 }
 
 @keyframes blink {
@@ -323,4 +323,4 @@ td:last-child {
   50% {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
5

Joe, this worked beautifully, thank you.

To your first point - this makes sense, I think I got a little confused figuring out where Hugo pulls the main index.html file from.

I’m wondering if this is the same issue causing relative links on single pages to be broken (seen here, with the image and audio)?

6

Yes, but prepending everything with the subdirectory is fragile, as is your content directory structure.

Instead of this:

content/projects/
├── audio/
│   └── hellodummy1.mp3
├── img/
│   └── hellodummy.png
└── hellodummy.md

Do this:

content/projects/
└── hellodummy/
    ├── cover.png
    ├── index.md   <-- leaf bundle
    └── track.mp3

Now the image and track are page resources, so you can do:

{{ with .Resources.GetMatch "track.*" }}
  <audio class="card-audio" controls>
    <source src="{{ .RelPermalink }}" type="{{ .MediaType.Type }}">
  </audio>
{{ end }}

and

{{ with .Resources.GetMatch "cover.*" }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
7

With the approach above, if you name the page resources properly/consistently, you won’t need to reference them in front matter.

1 Like
8

Joe, once again an elegant (and quick) solution. Thanks!

Last related question! I currently have two static pages linked in the top nav, “Info” and “Submissions”. They’re just set as markdown files in the Content folder, what is the best way to organize those and link in the menu without having them show up as Projects? Something like this?

content/projects/
└── projects/
         └── hellodummy/
                 ├── cover.png
                 ├── index.md
                 └── track.mp3
└── info/
        ├── cover.png
        ├── index.md
        └── track.mp3
└── submissions/
        ├── cover.png
        ├── index.md
        └── track.mp3

And then I’d be able to pull in the resources the same way, and can just link to /info and /submissions, respectively?

9

That sounds right. Give it a try. Experimentation is a great way to learn.

1 Like
10

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