Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

kendall strautman
kendall strautman
7,114 Points
Posted by kendall strautman
kendall strautman
7,114 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
7,114 Points
kendall strautman
kendall strautman
7,114 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
PLUS
Mathew Tran
Courses Plus Student 10,205 Points
Mathew Tran
Mathew Tran
Courses Plus Student 10,205 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
7,114 Points
kendall strautman
kendall strautman
7,114 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.