@font-face declaration doesn't follow the fontspring bulletproof syntax error

user_16294710 0
Viewed 3232

I have been trying to change my fonts using font-face rule but it isn't working. It keeps showing "@font-face declaration doesn't follow the fontspring bulletproof syntax" everytime. I have gone through the web but haven't found any right solution? Here is my code:

@font-face {
  font-family: "MyFont";
  src: url(fonts/Benne-Regular.ttf) format("truetype");
}
h1 {
  font-family: "MyFont";
}

What should i do?

font-face css html
2 Answers

I don't know if any other linters than CSS Lint check for this but this is a reference to the ?#iefix string used to work around an old Internet Explorer bug with parsing font URLs, which Fontspring calls the bulletproof @font-face syntax.

If you're not supporting old versions of IE, you can safely ignore this warning, and I would strongly urge you to disable CSS Lint and use something like stylelint instead. CSS Lint has not been updated in years, and the bulletproof syntax is a product of its time, so is no longer needed today.

If you are supporting old IE, or can't disable CSS Lint and want to make this warning go away:

@font-face {
font-family: "MyFont";
src: url("fonts/Benne-Regular.ttf?#iefix") format("truetype");
}
h1 {
font-family: "MyFont";
}
user_1062240

your format seems right, as Roddy mention check your url, here is your code with Benne font using google cdn

@font-face {
font-family: "MyFont";
  src: url(https://fonts.gstatic.com/s/benne/v10/L0xzDFAhn18E6Wj2nN8.woff2) format('woff2');
}
h1 {
font-family: "MyFont";
}
<h1>test</h1>

user_149717840
Related