Custom Fonts Defined With #font-face Only Working In Edge - html

Question

I was trying to add a custom font to my Neocities site, so I used the following css code in my style.css file:
body{
font-family: statusplz;
font-size: 10px;
}
p {
}
html {
background-color: #000100;
color: #999999;
font-size: 14px;
}
h1 {
color: #990033;
font-size: 28px;
}
hr {
color: #660033;
border-color: #660033;
background-color: #660033;
}
h2 {
}
#font-face {
font-family: 'statusplz';
src: url('https://vaguesoft.neocities.org/statusplz.ttf') format("truetype");
}
The custom font does not display in any browser other than Edge. I've used other sites with custom fonts on Firefox, and Chrome. I viewed the css files for those sites using the firefox dev tools, and they also used ttf files and #font-face, but actually worked. I don't know why the font isn't showing up in other browsers. I don't know if the problem is in the css file, the font file, or the html of the site. It was working at some point. It works on one of my computers, but that machine already has the font installed. Maybe I'm not handling frames properly (I do have a sidebar)? Any help would be greatly appreciated. Here's a link to the site: https://vaguesoft.neocities.org/