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 trialkendall strautman
7,114 PointsFonts 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!!
1 Answer
Mathew Tran
Courses Plus Student 10,205 PointsI 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
7,114 PointsThanks 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.
kendall strautman
7,114 Pointskendall strautman
7,114 Pointshere 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!