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

html css fonts font-face

11,894

Solution 1

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.

Solution 2

First your src is not formatted right try to change it with this

src: url('/Files/Fonts/KeepCalm.eot?')

Note: always practice to use relative paths

Solution 3

Supposing that your folders are like this:

|-- index.html
|--|Files
   |--|Fonts
      |-- KeepCalm-Medium.eot (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.woff (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.woff2 (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.ttf (Original File)

I created this html code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Stack Overflow Test</title>
        <style type="text/css" media="screen">
            @font-face {
              font-family: 'KeepCalm';
              src:  
                    url('Files/Fonts/KeepCalm-Medium.eot?') format('embedded-opentype'),
                    url('Files/Fonts/KeepCalm-Medium.woff') format('woff'),
                    url('Files/Fonts/KeepCalm-Medium.woff2') format('woff2'),
                    url('Files/Fonts/KeepCalm-Medium.ttf') format('truetype');
            }
            .header {
                font-family: KeepCalm;
            }
        </style>
    </head>
    <body>

    <div class="header">
        Keep Calm
    </div>


    </body>
</html>

And it works. If you have the same folders that supposed and named correct the font files it will work. And you do not need a webserver. Simple html, and works.

11,894

Author by

MilkToast

Updated on June 04, 2022

Comments

MilkToast almost 2 years
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.