"#font-face declaration doesn't follow the fontspring bulletproof syntax" error when trying to implement custom font - html

Question

I'm trying to add a custom font to my website, but keep getting the same error no matter what I try, and I can't find much about how to go about fixing it.
Here's my code:
#font-face {
font-family: "Moderna";
src: url("/MODERNA.TTF")
}
Suggestions?

Answer 1

The fontspring bulletproof syntax is just a recommendation. It declares your #font-face must satisfy below syntax to work properly in most cases:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg')
}
Most browsers supports TTF fonts now but if you can't see the font in browser try this
#font-face {
font-family: "Moderna";
src: url("/MODERNA.TTF") format("ttf");
}
And if my memory serves me then the rule must be on top of your css file. And please check the file /MODERNA.TTF exists.

Answer 2

Pretty sure your path/url is causing this issue:
src: url("/MODERNA.TTF")
implies you're entering a direcory named 'MODERNA.TTF' and not a file.
As #Mik pointed out the recommended declaration should be fine – unless your file couldn't be found.
Depending on your html/css file structure it should rather be something like this:
(granted your font file resides in the same directory as your css.
#font-face {
font-family: 'Moderna';
src: url('MODERNA.eot?') format('eot'),
url('MODERNA.woff') format('woff2'),
url('MODERNA.woff') format('woff'),
url('MODERNA.ttf') format('truetype'),
url('MODERNA.svg#svgFontName') format('svg')
}
Keep also in mind, that referencing font files via #font-face is case-sensitive (there might be exceptions).
So double check if your exact font file name is really using uppercase letters (MODERNA.TTF or moderna.ttf).