custom font will not display not matter what i do - html

Question

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;
}

Answer 1

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');
}

Answer 2

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.