Development Tools

kendall strautman
kendall strautman
6,229 Points

Fonts work on Treehouse but break on Github - Why??


I recently uploaded a project to GitHub that I made in Treehouse Workspaces. Everything works fine except I can't get the fonts to work. These are otf and ttf font files that I have locally, when I uploaded them to treehouse and called them with @font-face, it worked beautifully.

However, now on Github my custom fonts are not being loaded. I have tried switching between absolute and relative file paths - to no avail.

After some research I see that this is a tricky thing for people? Does anyone have any advice on how I can get these working on github? Is it a problem with my file paths? I'm new to GitHub so I'm not sure if there's something simple I am missing.

Does anyone else have problems with @font-face and github when they aren't using google fonts or self-hosting custom fonts? Any feedback would be much appreciated!!

kendall strautman
kendall strautman
6,229 Points

here is the link to my project on github-

and a snapshot of the workspace where the fonts work perfectly - - thank you!

1 Answer

Mathew Tran
Mathew Tran
Pro Student 8,698 Points

I got it working with the following relative path from your github link.

@font-face {
  src: url("../fonts/MarkPro-Medium.otf") format('opentype');

Not sure why traversing back two directories initially worked.

This was my though process for accessing via a relative path:

> styles.css
> MarkPro.otf

If I wanted styles.css to use MarkPro.otf. Styles.css is referring to a file that doesn't exist in the current folder, so I need to move up one directory

relativePath = ".."

I want to access MarkPro.otf, so I need to access fonts directory.

relativePath = "../fonts"

I want the font file.

relativePath = "../fonts/MarkPro.otf"

Hope this helps!


kendall strautman
kendall strautman
6,229 Points

Thanks so much for looking at this! And it totally worked as ../fonts/MarkPro.otf instead of ../../fonts/MarkPro.otf - I'm confused also why the extra ../ worked in treehouse workspaces, but now I know to pay better attention to my relative file paths.