The font-face Polyfill

- 1 min

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.

comments powered by Disqus
rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo stackoverflow codepen