Chrome @font-face issue

Question

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:

Firefox:

Answer 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;
}