Font files being blocked?

Archive
1

Hi, I recently uploaded some custom font files to my site, but they are being blocked (grav returns a 404 error) when I try to access them. Is there something I need to do to serve font files like woff from inside a grav site?

2

Nothing in particular needs to be done, but the path must be correct. A 404 means that the resource cannot be found, not that it is blocked (that would be a 403).

Where are the files located, what path are used to access them in Grav, and what URL returns as the actual path in console (Chrome DevTools, F12)?

3

sorry, to give you more information: I have a fonts folder setup as a “page” on the site, so I’m trying to get the URL http://whoisbechtel.com/fonts/graphik-regular-webfont.woff to work. The file exists in a folder called fonts under pages, but it is coming back as a 404 error, so I’m confused about how the routing is supposed to work.

4

have you made sure the MIME type is set on the server config?

5

I have this set in the /user/config/system.yaml file:
pages:
theme: timeline
markdown_extra: false
process:
markdown: true
twig: false
fallback_types: [png,jpg,jpeg,gif,mp4,ogv,webm,html,css,js,mp3,woff,eot,svg,ttf]

Is there another setting I should be looking for?

6

I was thinking more on your server. I had an issue like this years back and i could not serve font files - like .woff, .eot etc.

It would depend who you are hosting with. Let me know and i will see if i can find the right place to look for you

7

I have a staging version of the site on the same server, and I don’t have an issue serving the fonts from a non-GRAV directory or from within the grav theme folder. It’s just when I try to serve the files from within the pages directory.

8

I have your font working just fine.

I simple added the font-face to my CSS on my dev server, and then referenced the font-family in my CSS file and it worked fine.

Add the font face:

@font-face {
  font-family: 'sample';
  font-style: normal;
  src: url(http://whoisbechtel.com/fonts/graphik-regular-webfont.woff) format('woff');
}

Then add it to our CSS.

.someclass {
 font-family: sample;
}

Hope that helps.

9

yes, I copied the fonts folder to the public_html folder to get around the issue on our live site. I was hoping to hear if there was a way to serve the same content from the pages folder so that i could keep everything inside the theme’s git repository.

10

Can you not just add it to your theme’s font folder? and then reference them in a similar way to font awesome is?

11

I’m not looking for a long term solution. I ran across behavior that I did not understand while looking for a minimal effort patch for 404 errors. I’ll revisit the css stylesheet and fix the pathing when we return to this project in a few months. I figured out to drop a folder in the root of the site to fix the 404 errors, but I don’t understand why adding a similar folder to the pages directory didn’t work?

12

And I do get a 404 error when trying to access that file on the staging version of the site, not a 403. http://timeline.bigfatideas.com/fonts/graphik-regular-webfont.woff
I’m assuming that this is some sort of default error handling for GRAV with disallowed content types?

1 Like