Self hosting Google's Material Design Icon Fonts - OTS parsing error - Invalid Version tag

Question

I want to self host Material Design Icon Fonts. I have followed their developer guide. So I downloaded the icon font from here, coppied the eot, ttf, woff and woff2 files into my project directory and included it in my CSS. But I am getting a ton of errors:

The question is why and how do I fix it. SSCCE follows:

/* fallback */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/material/MaterialIcons-Regular.eot');
  /* For IE6-8 */
  src: local('Material Icons'), local('MaterialIcons-Regular'), url('fonts/material/MaterialIcons-Regular.woff2') format('woff2'), url('fonts/material/MaterialIcons-Regular.woff') format('woff'), url('fonts/material/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

<!DOCTYPE html>

<html>

<head>
  <link type="text/css" rel="stylesheet" href="styles.css" />
  <link type="text/css" rel="stylesheet" href="material.min.css" />
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="material.min.js"></script>
</head>

<body>
  <button class="mdl-button mdl-js-button"><i class="material-icons">chevron_left</i>
  </button>
</body>

</html>

The question is why and how to fix this?

My Project Hierarchy:

Possible duplicate of [Failed to decode downloaded font](http://stackoverflow.com/questions/30442319/failed-to-decode-downloaded-font) — Aslam, Dec 05 '16 at 05:27

score 0 · Answer 1 · answered Dec 05 '16 at 05:28

use this format:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

What part of that is going to help, and how is it different from mine? — Solace, Dec 05 '16 at 08:35

score 0 · Answer 2 · answered Oct 15 '18 at 19:13

If you downloaded the fonts from the webbrowser via "save link" you might download an incomplete ASCII version instead of binary. I run into this problem too and found a solution from Jodamo5 here Ps, if you are not using FTP you can also download the complete master.zip file from your browser and extract the required font files from the zip.

Self hosting Google's Material Design Icon Fonts - OTS parsing error - Invalid Version tag

2 Answers2