Github Pages font-face not working

Question

I uploaded my project to Github pages and the font doesn't work! I've read other questions about the issue that lead me to think I need to change how I'm pointing the file, but I can't sort it out.

Here's my @font-face:

@font-face {
    font-family: headerFont;
    src: url(fonts/FreePixel.ttf);
}

Here's my file structure:

Portfolio/
    index.html
    css/
        styles.css
        fonts/
            FreePixel.ttf

Answer 1

Try with a relative path, meaning starting with ./

src: url(./css/fonts/FreePixel.ttf);

That will check from which root folder GitHub page is considering that relative path.

Of course, that supposes the files are uploaded, and not (as it was the case) in the .gitignore file of the repo.