I am trying to use a custom web font on a GitHub page using @font-face in my CSS. I created a folder in the repository and uploaded the .woff-file of the font I want to use. However, I seem to be unable to properly link the font. Below you'll find the very basic HTML and CSS I am working with.
In my GitHub page ( [username].github.io ) it is possible to simply link a stylesheet, since it is sitting in a folder in the same directory as index.html:
Now, why do I seem to be unable to link a .woff-file also sitting in a folder in the same directory?:
I tried to do so by linking to the font via @font-face and using Assets/AkzidenzGrotesk-Regular.woff as the url. Yet, the site refuses to use the font and falls back on Times, as specified in the CSS.
Can someone help my out and explain to me, why this is happening? How do I have to link the font-file in order to use it on the site?
My Index file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/basic.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<h1>Personal HTML-Projcet</h1>
<p>Personal web design project, hosted via GitHub-Pages.</p>
<div class="grotesk">
<p>This is a test, using Akzidenz Grotesk as a webfont.</p>
</div>
</body>
</html>
And the respective CSS:
@font-face {
font-family: AkzidenzGroteskRegular;
src: url(/Assets/AkzidenzGrotesk-Regular.woff);
}
body {
background-color: white;
font-family: 'Work Sans', sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
.grotesk {
font-family: 'AkzidenzGroteskRegular', 'Times';
}
Make sure you refresh your cache, because everything I see on j0hnga1t.github.io shows that the Berthold Akzidenz-Grotesk Regular font is used.