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

user_17743079 0
Viewed 180

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?

css html
2 Answers

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.

user_56991750

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).

user_150156750
Related