2

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?

FrontDev
  • 837
  • 5
  • 19
  • "In latest browser versions font works fine." - by this do you mean newer versions of Chrome too? Or does it not work in Chrome at all? – 97ldave Feb 09 '15 at 14:22
  • yes, in Chrome 40, 39.. works fine, only old versions have problems with font – FrontDev Feb 09 '15 at 14:23
  • are you sure there isn't a different CSS issue occurring here? Does nay text appear? or is the font just not applying? – 97ldave Feb 09 '15 at 15:00
  • no, text is just disappeared, not sure which can be a problem, as no problematic styles are on it. just font-size, color, line-height.., other fonts are working only with "DIN-Regular" font this happens. – FrontDev Feb 09 '15 at 15:06
  • can you give a demo of it not working? – 97ldave Feb 09 '15 at 15:19

3 Answers3

2

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.

FrontDev
  • 837
  • 5
  • 19
0

Are you calling the font in your CSS?

body {
font-family: 'DIN-Regular', Fallback, sans-serif;
}
Izzy
  • 6,740
  • 7
  • 40
  • 84
BuiltInOneDay
  • 46
  • 4
  • yes, the problem is that all this wants are not working (fonts after comma), but when I give only Arial, it shows the font – FrontDev Feb 09 '15 at 14:29
  • Open your control panel, are there any 404 errors? Maybe it is a pathing issue to the fonts folder? – BuiltInOneDay Feb 09 '15 at 14:37
  • If that were a path issue fonts would not work at all, but in latest version of Chrome it works fine. – FrontDev Feb 09 '15 at 14:40
  • @FrontDev `If that were a path issue fonts would not work at all` thats not fully true. While unlikely in this particular case, in theory the versions around 26 could e.g. try `.ttf` first if available and then before using `.woff` or anything similar, thats why the hit to check a `404` is not absurd. But I think the MIME problem mentioned in the other answer is more likely the reason. – t.niese Feb 10 '15 at 09:07
0

Your problem is this:

Resource interpreted as Font but transferred with MIME type application/octet-stream

To solve this issue, check out my answer here: Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream

You need to add mime type to htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woff
Community
  • 1
  • 1
97ldave
  • 5,249
  • 4
  • 25
  • 39
  • Added Mime types in htaccess but no success :( – FrontDev Feb 09 '15 at 16:11
  • The image I have posted in my answer is why your font is not displaying. So there is a good starting point. I had the same problem and it was due to mime types. – 97ldave Feb 09 '15 at 16:18