Search code examples
htmlcssfontsfont-face

Using custom @font-face in CSS is not working in any browser

So I have a HTML page, linked to a CSS file which is supposed to change the font of a div class called header, to a custom font named KeepCalm. Here's the code for defining the font-face:

@font-face {
  font-family: 'KeepCalm';
  src: url('Files\Fonts\KeepCalm.eot?') format('eot'), url('Files\Fonts\KeepCalm.woff') format('woff'), url('Files\Fonts\KeepCalm.ttf') format('truetype');
}

Here is the code to change the font-face of the header div class:

.header {
    font-family: KeepCalm;
}

However the fonts are not showing up in any browser I try, chrome, firefox or IE. I have already looked up how to fix it and have not yet found a solution.

Here is the link to the font I'm using: Here.

Solution

  • It turns out that I was using the "Files\Fonts\" as the path of the font, although since it was the css file I was using, it was already in the "Files" folder so I just needed it to change to "Fonts\KeepCalm.tff". Stupid mistake but it's easy to miss.