0

i want to add a custom font to my html page, but it does not work, i tried everything possible, checked other questions, trying to solve it their way, but nothing.
the font is in the same folder as my html file(the css is in the html file)

In html css i wrote:

@font-face {
    font-family: regular;
    src: url("8bitoperator_jve.ttf");
    //src: local("8bitoperator_jve.ttf"); i tried this too
}
body {
    background-color: #000;
    color: #FFF;
    font-family: regular;
}
Amir Beraha
  • 41
  • 1
  • 8

2 Answers2

0

You should find a specific font in local, but a font file in url. I mean, the local font doesn't need any path or file extension whereas a font file need it. If you want to target a local files first you can try like that:

@font-face {
    font-family: regular;
    src: local("8bitoperator_jve"),url("8bitoperator_jve.ttf") format('truetype');
}

Also you can try loading the font-face from an external CSS file.

Alex - DJDB
  • 700
  • 2
  • 8
  • 19
  • Have you tried without local ? src: url("8bitoperator_jve.ttf"); – Alex - DJDB Jul 08 '17 at 22:37
  • yes, is there a reason why microsoft edge is the only one that's working? – Amir Beraha Jul 08 '17 at 22:39
  • I kwow that maybe it could be impossible to charge font file directly from html document. Perhaps you could try loading the font face inside an external CSS file ? https://stackoverflow.com/questions/8749225/loading-external-font-in-html-page-with-inline-css – Alex - DJDB Jul 08 '17 at 22:48
0

The src attribute of @font-face specifies the resource containing the font data. This can be:

  • url: a URL to a remote font file location;
  • local: the name of a font on the user's computer.

In your case, you are passing a URL to local. Instead, you should use url:

@font-face {
    src: url('8bitoperator_jve.ttf');
}

If you want, you can also use both. But remember to give precedence to local, i.e.:

@font-face {
    src: local('Name of your font here'), url('8bitoperator_jve.ttf');
}
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
  • i tried both url and local, last thing i tried was local and forgot to change back to url, but still nothing, now it works with micosoft edge tho, but nothing on IE or chrome – Amir Beraha Jul 08 '17 at 22:35