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

Question

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.

Check if your font is being downloaded or not. It's possible tha your path is wrong. stackoverflow.com/questions/18900720/… — Eduardo Arruda Pimentel
– Eduardo Arruda Pimentel, Commented May 12, 2016 at 0:36
@EduardoArrudaPimentel I have tripple checked the path, and I'm not sure what you mean by checking if it's downloaded or not; I am using a local file, saved into a subfolder called ...\Files\Fonts — MilkToast
– MilkToast, Commented May 12, 2016 at 1:15
@AndréDion The debugger does say that the downloadable font download failed. Can you please link me to a tutorial or something to set up a web server, and will it cost? I'm not very experienced sorry. — MilkToast
– MilkToast, Commented May 13, 2016 at 0:07
@TacoMakerMan You can run a web server on your machine and serve up your files there, you don't need to pay for an external host. Just Google "<your OS> web server" and you'll get plenty of information. — André Dion
– André Dion, Commented May 13, 2016 at 11:45

MilkToast · Accepted Answer · 2016-05-17 14:05:26Z

3

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.

answered May 17, 2016 at 14:05

MilkToast

2111 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eduardo Arruda Pimentel · Accepted Answer · 2016-05-17 11:51:16Z

2

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.

edited May 17, 2016 at 11:51

answered May 12, 2016 at 18:10

Eduardo Arruda Pimentel

5181 gold badge6 silver badges25 bronze badges

3 Comments

MilkToast Over a year ago

Okay, so I changed the font-face section to the way you suggested and added the single quotes to the font-family. It didn't do anything, so I also tried to use your tests and neither of them did anything either. I have no idea why.

Eduardo Arruda Pimentel Over a year ago

Could you upload your font in a public link? I will download it and check the code.

MilkToast Over a year ago

I added the link to the main question for you to check out. I converted the ttf file to all the other file formats that I used.

shA.t · Accepted Answer · 2022-12-14 10:27:12Z

2

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

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

Note: always practice to use relative paths.

edited Dec 14, 2022 at 10:27

shA.t

17.1k5 gold badges59 silver badges121 bronze badges

answered May 12, 2016 at 1:43

winresh24

6791 gold badge6 silver badges27 bronze badges

8 Comments

MilkToast Over a year ago

I'm not exactly sure what this changes, I tried this and it did nothing new. You just added a "/" at the beginning right?

winresh24 Over a year ago

no your slash are inverted take a look it must be a common slash not a back slash

MilkToast Over a year ago

@winresh14 Oh I see. I replaced them with regular slashes and it did not change anything.

winresh24 Over a year ago

check the file if it's existing. is your website is already live?

MilkToast Over a year ago

@winresh14 The file definitely exists, it's not currently live, just a .html file at the moment.

|

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related