Search code examples
cssgoogle-chromefontsfont-face

Font loading in Safari but not Chrome


I am attempting to use the following webfont kit from Font Squirrel on a webpage - http://www.fontsquirrel.com/fonts/DJ-Gross

On the 'Webfont kit' tab on the above page, I selected 'No subsetting' form the dropdown and then clicked 'DOWNLOAD @FONT_FACE KIT'

I think font squirrel does a great job of setting out the @font-face declaration for you so I have just used this in my css and moved the font files (.eot, .svg, .ttf, and .woff) to an appropriate directory to use on my site where fairly sure filepaths are referenced correctly.

This font is rendering in Safari but not Chrome

Disregarding my webpage, this can be reproduced by opening the DJGROSS.html file that comes with the Font Squirrel download. Again, this demo works in Safari but not Chrome and I have not touched this code at all :)

EDIT:

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

}

All the font files are in the same directory as my style.css file where this @font-face declaration is


Solution

  • is working... look this image try to clean you Google Chrome!