3

I'm currently trying to fix an issue with my portfolio website. I use a custom font to keep the page looking good, but for some reason @font-face refuses to work.

Here's my CSS:

@font-face{
font-family: 'Quicktype';
src: url('Fonts/quicktype_condensed-webfont.woff2') format('woff2'),
     url('Fonts/quicktype_condensed-webfont.woff') format('woff'),
     url('Fonts/QuickType Condensed.ttf') format('truetype'),
     url('Fonts/QuickType Condensed.eot'),
     url('Fonts/QuickType Condensed.eot?#iefix') format('embedded-opentype'),
     url('Fonts/QuickTypeCondensed.svg#QuickTypeCondensed') format('svg');
font-weight: normal;
font-style: normal;
}

Here's a link to my website:

http://alfabitsgamedev.com/

And here's a link to my github file hierarchy.

https://github.com/Alfabits/alfabits-game-dev-3

I've tried using as many font file types as I can, but it's not working on any of the browsers I use. I've tried different font directory paths, but that doesn't seem to work either. I've also looked around and none of the solutions I've found have solved my problem.

The website always returns with either a 404 Error for the .ttf, .woff, and .woff2 fonts (never the other fonts, for some reason), or a weird GET error.

I know I can't use .htaccess files, since github pages hosts only static stuff and can't do server side logic. So I'm kind of lost as to why this is happening and how I can fix it. Thanks in advance, if you can manage to help.

Andrew Moore
  • 81
  • 1
  • 7
  • Here's the links to the other solutions I've checked. https://stackoverflow.com/questions/5938024/font-face-not-working http://stackoverflow.com/questions/35718750/adding-custom-fonts-to-github-pages http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files – Andrew Moore Feb 02 '17 at 17:09
  • Here's a picture of the weird GET error from the Google Chrome console: https://gyazo.com/ffb6353a720bd5c1caf532fe3ebb2e65 – Andrew Moore Feb 02 '17 at 17:09
  • try adding a forward slash in front of your URL's? i.e. `url('Fonts/quicktype_condensed-webfont.woff2')` becomes `url('/Fonts/quicktype_condensed-webfont.woff2')` – Frits Feb 02 '17 at 17:12
  • I'm saying that because [relative links] (http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/) need to start with a forward slash, otherwise the browser interprets the link as a new FQDN as far as I'm aware... – Frits Feb 02 '17 at 17:14
  • That was exactly the answer. I feel silly for not realizing that, considering how long I've been stuck on the problem. Thanks for the help! – Andrew Moore Feb 02 '17 at 17:22
  • step 1: simplify. It's 2017, `eot`, `svg` and "raw" `ttf`/`otf` are not formats you should be using anymore. `eot` is *exclusively* for IE8 and below, which MS no longer supports, `svg` fonts were deprecated years ago, and `ttf`/`otf` are *system* fonts, wrapped by woff so if you already use woff, there is literally no point in also loading ttf/otf – Mike 'Pomax' Kamermans Feb 03 '17 at 14:06
  • Thanks for the tip! – Andrew Moore Feb 06 '17 at 00:38

2 Answers2

4

I found the solution! I was using Absolute Links instead of Relative Links. Relative Links make the intended path start from where the currently-used file is located, and needs to start with a '/'. Absolute Links will start the intended path starting from the system's root folder, not the file's.

Find more here: coffeecup.com/help/articles/absolute-vs-relative-pathslinks‌​

Also, credit to Frits for the solution!

Andrew Moore
  • 81
  • 1
  • 7
  • did you modify your question, then? Because your question's code shows relative links. If you figured out the problem, don't update your post to suddenly show "perfectly fine code". That defeats the purpose of stackoverflow. – Mike 'Pomax' Kamermans Feb 03 '17 at 14:07
  • No, what I was using up above seem to be absolute links rather than absolute links. I haven't edited my post either, it's all the same as when I posted it. @Frits helped out with the solution, and all I had to do was add a '/' at the beginning of my links. – Andrew Moore Feb 06 '17 at 00:23
  • Ah: that's the opposite then. Without the `/`, those `url()` are relative links, specifically: relative to the current document. So if you're on `www.cake.com` they point to `www.cake.com/Fonts/...` and if you're on `www.cake.com/poundcake/` they point to `www.cake.com/poundcake/Fonts/...`. With the `/` added your URL are *still* relative, but are now relative to the domain root (so in both above cases they'll point to `www.cake.com/Fonts/...`). Absolute URLs specify a full `http://.......` location (or `https://`, or `//` for absolute URL but relative protocol, i.e. "whatever this page uses") – Mike 'Pomax' Kamermans Feb 06 '17 at 05:09
0

Unrelated answer, in case anyone comes across this issue. Make sure that you have a .nojekyll file in the root directory of your github-pages branch/dir if you have any directories that start with _, such as the ones that webpack creates: ./_/node_modules/@fortawesome/....

https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

KFunk
  • 2,956
  • 22
  • 33