Adding Custom Fonts to Github Pages

Adding custom fonts to GitHub pages

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.

How to load custom font on Github pages?

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.

How do I add local font in git Pages

Solved
Still I don't know how to make that work but I found a similar web font and used it

How do I change my website's font on Github Pages?

You can create separate *.css file with this code, or add this code in your assets/mobirise/css/mbr-additional.css (if you create separate file, don't forget import this file in your home.html.

@font-face {
    font-family: 'OpenSans-Light';
    src: url('/OpenSansFonts/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('/OpenSansFonts/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('/OpenSansFonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('/OpenSansFonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

For change font across web site, add to body in assets/mobirise/css/mbr-additional.css font-family property.

body {
  font-family: 'OpenSans';
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}

For import separate css file with fonts, add in your home.html around 42 string this code:

<link rel="stylesheet" href="your_path_to_file/file_with_fonts.css" type="text/css">

When you want another style of font, use font-family, font-weight and font-style properties.

Feel free ask other questions :) Hope this will help you

@font-face not working with github pages

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!

Unable to link custom font via @font-face on GitHub Page

Make sure you refresh your cache, because everything I see on j0hnga1t.github.io shows that the Berthold Akzidenz-Grotesk Regular font is used.

Github Pages font-face not working

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.

---

Related Topics