Search code examples
cssfont-faceosx-yosemite

@font-face is not working on OS X Yosemite Chrome 26 - versions

My font is not working on OS X Yosemite Chrome 26 - versions. It shows blank space in the place of the font. In latest browser versions font works fine.

CSS

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

Edit: 

body {
  font-family: 'DIN-Regular', Arial, sans-serif;
}

The fonts after comma are not working too

Can anyone help?

Solution

  • As it turned out, the problem was in font files generated by font generators.

    The fonts generated from:

    https://www.web-font-generator.com/ ,

    http://www.fontsquirrel.com/tools/webfont-generator ,....

    don't work properly in Chrome old versions.

    Finally, I've found another one: https://fontie.flowyapps.com/home , by which generated font types work fine in all browser versions.

    Thanks all for answers.