htmlcssfontsroboto

Failed to decode downloaded font and OTS parsing error: invalid version tag


I'm receiving the errors:

Failed to decode downloaded font and OTS parsing error: invalid version tag

My code is inside my CSS file:

@import url("../fonts/roboto/roboto.css");

Then, inside the roboto.css file, I have the following code.

/* Roboto Fontkit (LOCAL)
-----------------------------------------*/
/*(1) Roboto-Regular-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-Regular-webfont.eot");
  src: url("Roboto-Regular-webfont.eot?#iefix"), url("Roboto-Regular-webfont.woff") format("woff"), url("Roboto-Regular-webfont.ttf") format("truetype"), url("Roboto-Regular-webfont.svg#Roboto") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*(2) Roboto-Italic-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-Italic-webfont.eot");
  src: url("Roboto-Italic-webfont.eot?#iefix"), url("Roboto-Italic-webfont.woff") format("woff"), url("Roboto-Italic-webfont.ttf") format("truetype"), url("Roboto-Italic-webfont.svg#Roboto") format("svg");
  font-weight: normal;
  font-style: italic;
}
/*(3) Roboto-Medium-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-Medium-webfont.eot");
  src: url("Roboto-Medium-webfont.eot?#iefix"), url("Roboto-Medium-webfont.woff") format("woff"), url("Roboto-Medium-webfont.ttf") format("truetype"), url("Roboto-Medium-webfont.svg#Roboto") format("svg");
  font-weight: 500;
  font-style: normal;
}
/*(4) Roboto-MediumItalic-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-MediumItalic-webfont.eot");
  src: url("Roboto-MediumItalic-webfont.eot?#iefix"), url("Roboto-MediumItalic-webfont.woff") format("woff"), url("Roboto-MediumItalic-webfont.ttf") format("truetype"), url("Roboto-MediumItalic-webfont.svg#Roboto") format("svg");
  font-weight: 500;
  font-style: italic;
}
/*(5) Roboto-Bold-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-Bold-webfont.eot");
  src: url("Roboto-Bold-webfont.eot?#iefix"), url("Roboto-Bold-webfont.woff") format("woff"), url("Roboto-Bold-webfont.ttf") format("truetype"), url("Roboto-Bold-webfont.svg#Roboto") format("svg");
  font-weight: bold;
  font-style: normal;
}
/*(6) Roboto-BoldItalic-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-BoldItalic-webfont.eot");
  src: url("Roboto-BoldItalic-webfont.eot?#iefix"), url("Roboto-BoldItalic-webfont.woff") format("woff"), url("Roboto-BoldItalic-webfont.ttf") format("truetype"), url("Roboto-BoldItalic-webfont.svg#Roboto") format("svg");
  font-weight: bold;
  font-style: italic;
}
/*(7) Roboto-Light-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-Light-webfont.eot");
  src: url("Roboto-Light-webfont.eot?#iefix"), url("Roboto-Light-webfont.woff") format("woff"), url("Roboto-Light-webfont.ttf") format("truetype"), url("Roboto-Light-webfont.svg#Roboto") format("svg");
  font-weight: 300;
  font-style: normal;
}
/*(8) Roboto-LightItalic-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-LightItalic-webfont.eot");
  src: url("Roboto-LightItalic-webfont.eot?#iefix"), url("Roboto-LightItalic-webfont.woff") format("woff"), url("Roboto-LightItalic-webfont.ttf") format("truetype"), url("Roboto-LightItalic-webfont.svg#Roboto") format("svg");
  font-weight: 300;
  font-style: italic;
}
/*(9) Roboto-Black-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-Black-webfont.eot");
  src: url("Roboto-Black-webfont.eot?#iefix"), url("Roboto-Black-webfont.woff") format("woff"), url("Roboto-Black-webfont.ttf") format("truetype"), url("Roboto-Black-webfont.svg#Roboto") format("svg");
  font-weight: 900;
  font-style: normal;
}
/*(10) Roboto-BlackItalic-webfont
.......................................*/
@font-face {
  font-family: "Roboto";
  src: url("Roboto-BlackItalic-webfont.eot");
  src: url("Roboto-BlackItalic-webfont.eot?#iefix"), url("Roboto-BlackItalic-webfont.woff") format("woff"), url("Roboto-BlackItalic-webfont.ttf") format("truetype"), url("Roboto-BlackItalic-webfont.svg#Roboto") format("svg");
  font-weight: 900;
  font-style: italic;
}

I'm not sure what's causing the error I'm experiencing. This seems like it should be working perfectly fine.

I have not done modified the CSS file at all.


Solution

  • When you uploaded the font to your server, did you make sure you were in Binary Mode instead of ASCII (text)? That was my issue and uploading the files again in the correct mode resolved my issue.