How to load custom font on Github pages? - css

Question

I've looked at some other threads and none of those solutions worked for me so I decided to start a new thread.
I'm trying to use a custom downloaded font on my project, locally work fine, but on the Github page, the font doesn't show up.
Here's the code I added to the CSS file and works on the local project.
#font-face {
font-family: 'BadDogSCapsSSKBold';
src: url('/font/BadDogSCapsSSKBold.svg#BadDogSCapsSSKBold') format('svg'),
url('/font/BadDogSCapsSSKBold.ttf') format('truetype'),
url('/font/BadDogSCapsSSKBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
As mentioned above, I tried some options that other people said was working, but with no luck, I've tried these three methods:
./font
../font
../../font
Here is the local project structure from my IDE
And here is the folder structure on Github, although I've pushed the project straight from Pycharm, so I wouldn't expect an error there, and yes, the style.css file is there in the css folder.

Answer 1

Now it works, the problem was in part the path used initially, but mostly caused by the extra time that the Github page was needing to get updated.
All the pages I've created in the past were fully working as soon as they were showing a green check next to the link and marked as active, like below, and this for me has never been more than 5 minutes as they are small projects, but this time took more than 3 hours.
In the end, the option that worked for me both locally and remotely was by adding ../ in front of the path, like this.
#font-face {
font-family: 'BadDogSCapsSSKBold';
src: url('../font/BadDogSCapsSSKBold.svg#BadDogSCapsSSKBold') format('svg'),
url('../font/BadDogSCapsSSKBold.ttf') format('truetype'),
url('../font/BadDogSCapsSSKBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
The reason I couldn't figure it out quickly was that when I saw the ../ method not working after one hour, and the other thread saying that in 2022 you should use the ../../ method, I didn't give it enough time, in the other end, the ../../ method, for me doesn't work at all, either locally or remotely, and I let it all night just to be sure.