Development Tools

kendall strautman
kendall strautman
6,229 Points

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

Hi!

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- https://github.com/kendallstrautman/r.neil

and a snapshot of the workspace where the fonts work perfectly - https://w.trhou.se/l05jc171y9 - thank you!

1 Answer

Mathew Tran
PRO
Mathew Tran
Pro Student 8,698 Points

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

@font-face {
  font-family:'MarkPro-Medium';
  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:

index.html
styles
> styles.css
fonts
> 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!

Matt

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.