Multiple @font-face not working in IE9–11 or Firefox

Question

I have a site in development that uses four external fonts. Trajan and Museo are working fine through Typekit, but my other two (Marketing Script and Socialico) are having trouble in IE9–11 and Firefox. I’ve tried a variety of path changes and hacks to get them to display, but they unwaveringly will not.

Test site at http://www.wwva.org.php53-14.ord1-1.websitetestlink.com/students (you may need to full screen to see Socialico in the left bar).

I am currently including a secondary stylesheet using a CSS @import. I have tried including the @font-face declarations directly at the top of the style.css file as well, with same results. The @font-face declarations look like this (relative paths verified):

@font-face {
  font-family: 'Socialico';
  src: url('socialico-webfont.eot'); /* IE9 Compat Modes */
  src: local("☺"),
       url('socialico-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('socialico-webfont.woff') format('woff'), /* Modern Browsers */
       url('socialico-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('socialico-webfont.svg#Socialico') format('svg'); /* Legacy iOS */
     }

@font-face {
  font-family: 'marketingScript';
    src: url('marketingscript-webfont.eot');
    src: local("☺"),
         url('marketingscript-webfont.eot?#iefix') format('embedded-opentype'),
         url('marketingscript-webfont.woff') format('woff'),
         url('marketingscript-webfont.ttf') format('truetype'),
         url('marketingscript-webfont.svg#marketingScript') format('svg');
    font-weight: normal;
    font-style: normal;
  }

I’ve already done some digging on StackOverflow, but it’s definitely possible I missed something. I have not done any permission/configuration changes on Firefox, because that would only solve the issue locally, and not for other viewers once the site goes live.

Thanks in advance!

Answer 1

Goodness, I feel like a doof. I had scoured the @font-face code so many times that I became fixated on it, while apparently neglecting the actual call to apply the code. I left out a comma between the primary and secondary font-face values, producing inconsistent results due to broken syntax.

Let it be known—it’s always a good idea to proofread all of one’s code.

I apologize for wasting your time!

Answer 2

Firefox has a pref (security.csp.enable) Go to your site's .htaccess and disable CSP

Since you tested this prior to this edit, you are pretty much left with two alternative solutions. I think the makers of that font may not have made it supportive of every browser. A lot of chatter in the blogs about the font not rendering in FF or IE Edge>

So here is what I'd do:

1. Replace it with an image.
2. Use Cufon.js

Either way, you will be safe because we are not exactly talking about a paragraph. It's just a word.

Hope that helped you some

Answer 3

I had this problem. Turns out I was missing a comma in the font-family declaration. E.g.

Broken:

body {
   font-family: 'Custom-Font' Helvetica, sans-serif;
}

Works:

body {
   font-family: 'Custom-Font', Helvetica, sans-serif;
}