Adding custom fonts to GitHub pages

Question

I just hosted my new website on GitHub. I use there a few custom fonts, which I uploaded right next to the index.html and style.css files:

The font code:

@font-face {
  font-family: "gogoiadeco";
  src: url('gogoia-deco-webfont.eot');
  src: url('gogoia-deco-webfont.eot?#iefix') format('embedded-opentype'),
    url('gogoia-deco-webfont.woff') format('woff'),
    url('gogoia-deco-webfont.ttf') format('truetype'),
    url('gogoia-deco-webfont.svg#Gogoia') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
    url('icomoon.woff') format('woff'),
    url('icomoon.ttf') format('truetype'),
    url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'gogoiaregular';
  src: url('gogoia-regular.eot');
  src: url('gogoia-regular.eot?#iefix') format('embedded-opentype'),
    url('gogoia-regular.woff2') format('woff2'),
    url('gogoia-regular.woff') format('woff'),
    url('gogoia-regular.ttf') format('truetype'),
    url('gogoia-regular.svg#gogoiaregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I'm new at GitHub and I have no idea what to change to make these fonts work.

Atlanta

Answer 1

I had this problem as well. I had fonts working properly locally, but couldn't seem to get it right on GitHub.

I figured out how to do this: The root of the gitHub.io page appears to be different than the local root directory, which leads to fonts in the wrong folder.

This is my code:

@font-face {
    font-family: F16;
    src: url("../SubSkipper/F16_Panel Font.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

SubSkipper is the name of my project and the .ttf font is in the apparent root directory what I mean by this is: "SubSkipper/" .

The path ../ goes back one level, then opens the root directory (SubSkipper) of the project as it appears locally.

Entomo

excellent! thanks for this solution, it was becoming a real pain in the neck for me! it might be useful to note (at least from my experience) that it seems that the fonts work locally with two distinct paths, which I believe shouldn't be the case, but appears to be. Only one of these paths is correct (and thus works when hosted) – Elburt

That is really weird since I needed to drop the first / to get my CSS working. – Gesundheit

Answer 2

If you're searching this in 2022 :

@font-face {
    font-family: F16;
    src: url("../../SubSkipper/F16_Panel Font.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

two levels above from my localhost config compared to answer given previously.

Bondmaid

Answer 3

The stylesheet file is located at https://you.github.io/assets/css/style.css when using just a markdown as the index, or README.md as the index. This is wooden-utensil's one using the Cayman theme, if you want to add custom css, I guess you can add to that file, just keep the existing code because then the Cayman or another theme won't work. Anyways I guess just add the

body {
    font-family: etc;
}

Abundance