Adding Custom Fonts To Github Pages

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-famil

Solution 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.

Solution 2:

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;
}