0

I have had an issue getting a font to display on Chrome recently, It still works on Firefox and I.E. but no longer loads on Chrome or Chrome Android.

In Chrome Inspector the font file is loaded and all appropriate css rules seem to be in place.

Chrome just shows a box in place of each character. The css looks like this:

@font-face {

  font-family: "SSSocialRegular";src: url('font/ss-social-regular.eot');
  src: url('font/ss-social-regular.eot?#iefix') format('embedded-opentype'),
       url('font/ss-social-regular.woff2') format('woff2'),
       url('font/ss-social-regular.woff') format('woff'),
       url('font/ss-social-regular.ttf')  format('truetype'),
       url('font/ss-social-regular.svg#SSSocialRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I tried removing the loaded font files to force chrome to load both the true type and svg fonts but it was the same result.

Chrome:

Chrome font error

Firefox:

Firefox font display

HulaHoof
  • 367
  • 2
  • 15
  • 1. Check your Chrome console, see if there are any errors. 2. Validate your page using http://validator.w3.org/ Sometimes dirty markup causes these issues. – odedta Apr 19 '15 at 08:55
  • No errors in the console, just 'Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)', some issues in the markup but nothing that looks font related. – HulaHoof Apr 19 '15 at 09:14
  • I advise to fix your markup to get it validated, that's always good. Are you sure you used `font-family: 'SSSocialRegular', Times New Roman;` rule like that? and made sure all the font files are actually there? can you provide a link to your page? EDIT: btw, not sure if it has any effect but you have an extra space after `url('font/ss-social-regular.ttf')` EDIT 2: disregard the dppx notification, it only a recommendation by Chrome, not an actual error. – odedta Apr 19 '15 at 09:20
  • Are you using adblock / ghostery / some other plugin by any chance? – PeeHaa Apr 19 '15 at 11:35
  • No adblock running, fails across multiple PC/Devices on chrome also – HulaHoof Apr 20 '15 at 05:54

1 Answers1

1

If anyone encounters this bug, I was also able to solve it by reapplying 

display:inline-block;

to my :before elements after the page loaded. I just did a simple .js check for chrome since this bug is only affecting my newer versions:

jQuery(window).load(function(){

   var isChrome = !!window.chrome && !!window.chrome.webstore;
   if(isChrome){
       jQuery('body').addClass('isChrome');
   }
});

and css

.isChrome .ss-social-regular.ss-instagram:before,.isChrome .ss-social-regular.ss-facebook:before,
.isChrome .ss-social-regular.ss-twitter:before,.isChrome .ss-social-regular.ss-pinterest:before {
 display:inline-block;
}
HulaHoof
  • 367
  • 2
  • 15