How can you serve a file from a GitHub repo with the appropriate Content-Type header?

Hi,

I am currently working on the Drum Machine project from the Front End Libraries section. I want to use custom fonts that I uploaded to GitHub. GitHub serves the raw files and this works fine for images and audio, but it is not working fine for .tff, .woff., and .woff2 fonts. I used the @font-face CSS rule to include these fonts in my project. I had to use a third party service called raw.githack.com in order to assign the correct Content-Type header to the custom fonts on my GitHub repo.

Is there a way to do this without using a third party service? I already uploaded the fonts to my GitHub Pages repo on the master branch and the gh-pages branch, but the fonts still won’t without the third party service. I would rather do everything with GitHub in order to have less dependencies.

Thanks for looking and have a great day!

Hello!

You should be able to access them using the raw github service. For instance, https://raw.githubusercontent.com/my-username/project-name/blob/master/path/to/the/font.woff (this is wrong, see below).

If you want to use the domain github.com then I don’t think it’s possible, since it’s supposed to serve a different kind of content (I may be wrong however).

Edit

To anyone else that reads this post, the raw URI I posted is wrong (like @TazExprez says in the next comment). The correct format for a github file has two formats (at least):

  1. Reference to a specific branch. In this URI https://raw.githubusercontent.com/my-username/project-name/master, for instance, we’re referencing the branch master.
  2. Reference to a specific commit. In this URI https://raw.githubusercontent.com/my-username/project-name/blob/b46ca349f0f8dc94815aac548786cfaf989781af, we’re referencing a specific commit blob.

After the blob or branch you can add the path to your specific file.

2 Likes

Thanks for your help! I would give you more hearts if I could! The issue that I was having with your address was that I was entering the /blob directory. I searched some more and removed it and now everything works! This is what I used for one of the fonts https://raw.githubusercontent.com/TazExprez/Logos/master/ShindlerFont_by_Juan_Casco.ttf and now it works on the project!

Thanks again!

1 Like

I had a similar issue but with jQuery JSON parsing a raw git file … would either of you have any guidance on it?


Thanks!

Hello,

I answered your other post, but in case someone comes here looking for the answer, the JSON file is not correctly formatted. Use a JSON validator to check your file(s) :slight_smile:.