0

I'm having a few problems with font-face that seems to occur every time I use it to include fonts. The only way to fix it is (I'm using Chrome btw) to go to the page in IE and let it redownload the font locally. The domain is: http://chahlesmc.us/

This is how it should look

This is the issue at certain times - the positioning seems to mess up.

Same applies to the navigation links, all the text seems to compact.

The first image shows the content how it should be, the other images show my issue with the bug. Thanks in advance!

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 100;
  src: url('./fonts/sourcesanspro-extralight-webfont.eot'); 
  src: url('./fonts/sourcesanspro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/sourcesanspro-extralight-webfont.svg') format('svg'),
  url('./fonts/sourcesanspro-extralight-webfont.woff') format('woff'),
  url('./fonts/sourcesanspro-extralight-webfont.ttf')  format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/sourcesanspro-light-webfont.eot'); 
  src: url('./fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/sourcesanspro-light-webfont.svg') format('svg'),
  url('./fonts/sourcesanspro-light-webfont.woff') format('woff'),
  url('./fonts/sourcesanspro-light-webfont.ttf')  format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/sourcesanspro-regular-webfont.eot'); 
  src: url('./fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/sourcesanspro-regular-webfont.svg') format('svg'),
  url('./fonts/sourcesanspro-regular-webfont.woff') format('woff'),
  url('./fonts/sourcesanspro-regular-webfont.ttf')  format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/sourcesanspro-semibold-webfont.eot'); 
  src: url('./fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/sourcesanspro-semibold-webfont.svg') format('svg'),
  url('./fonts/sourcesanspro-semibold-webfont.woff') format('woff'),
  url('./fonts/sourcesanspro-semibold-webfont.ttf')  format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/sourcesanspro-bold-webfont.eot'); 
  src: url('./fonts/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/sourcesanspro-bold-webfont.svg') format('svg'),
  url('./fonts/sourcesanspro-bold-webfont.woff') format('woff'),
  url('./fonts/sourcesanspro-bold-webfont.ttf')  format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/sourcesanspro-black-webfont.eot'); 
  src: url('./fonts/sourcesanspro-black-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/sourcesanspro-black-webfont.svg') format('svg'),
  url('./fonts/sourcesanspro-black-webfont.woff') format('woff'),
  url('./fonts/sourcesanspro-black-webfont.ttf')  format('truetype');
}
Tom Wilson
  • 253
  • 1
  • 7
  • 15
  • Can you show us how you are including your font faces? – zazvorniki Dec 03 '13 at 18:22
  • Check the source: http://chahlesmc.us/themes/default/fonts.css – Tom Wilson Dec 03 '13 at 18:30
  • You should be posting the code here though so it can be archived. Your site can change. It would be even better if you tried to recreate your issue in a jsFiddle – zazvorniki Dec 03 '13 at 18:34
  • Good point, my apologies. – Tom Wilson Dec 03 '13 at 18:35
  • OP edited to include code. Thanks for that. – Tom Wilson Dec 03 '13 at 18:36
  • Problem is, as much as this issue is re-occurring, it's not constant. – Tom Wilson Dec 03 '13 at 18:38
  • Looks fine for me in Chrome, Firefox and Safari – APAD1 Dec 03 '13 at 18:40
  • So this is only happening in ie? If so it looks like it's an ie issue http://stackoverflow.com/questions/14365520/ie-font-face-issues-solutions-we-tried – zazvorniki Dec 03 '13 at 18:46
  • No, it isn't only happening in IE. You don't seem to be understanding. This is not a permanent issue, it comes and goes. A quick fix is to force redownload of the font file by using IE instead of Chrome, then going back to Chrome. – Tom Wilson Dec 03 '13 at 18:54
  • It's really hard to diagnose an issue when it comes and goes randomly. From my side everything looks fine in both safari, chrome and firefox that was why I was assuming i.e. was the issue because it so often is. Other than that I don't know what to tell you – zazvorniki Dec 03 '13 at 19:03
  • If anything, Chrome is the issue. There must be something wrong with my syntax - if I was including from say, Google Web Fonts or Edge, nothing would go wrong (other than Chromes shitty font rendering in Windows) Surely I've missed something out, after all, this isn't a permanent issue so it's a bug somewhere. – Tom Wilson Dec 03 '13 at 19:04

0 Answers0