The font-face Polyfill

The polyfill syntax for @font-face would be something like:

@font-face {
  font-family: 'NOTDEF';
  src: url('NOTDEF.eot?#iefix') format('embedded-opentype'),  
       url('NOTDEF.otf')  format('opentype'),
	   url('NOTDEF.woff') format('woff'),
	   url('NOTDEF.ttf')  format('truetype'),
	   url('NOTDEF.svg#NOTDEF') format('svg');
  font-weight: normal;
  font-style: normal;
}

@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 */
}

It is likely that you only have one type of font file, that means you need to generate other formates like woff, eot, There are plenty of online font converters out there, but I’ve tried a few, this web font generator seems to be better. This is a list with other services.

Links

• 1
• 2