ie9 webfonts not loading

Question

I've tried all the other solutions provided here and elsewhere and I'm still having issues with webfonts loading in ie9.

Implemented the fix to the .htaccess file:

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Not receiving any css3 error messages in ie developer console.

Thing is when the initial page loads, the fonts don't load but when I navigate to any other page on the site, the fonts then load. If I go back to the initial page the fonts will now load too.

Feel like I've tried everything I was able to find on the web.

Heres my css:

/** FONTS **/

@font-face {
    font-family: 'UniversUltraCondensedRegular';
    src: url('../fonts/univers-ultracondensed-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/univers-ultracondensed-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/univers-ultracondensed-webfont.woff') format('woff'), /* Modern Browsers */
         url('../fonts/univers-ultracondensed-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/univers-ultracondensed-webfont.svg#UniversUltraCondensedRegular') format('svg'); /* Legacy iOS */
         font-weight: normal;
         font-style: normal;
    }


@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../fonts/websymbols-regular-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-  opentype'), /* IE6-IE8 */
         url('../fonts/websymbols-regular-webfont.woff') format('woff'), /* Modern Browsers */
         url('../fonts/websymbols-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); /* Legacy iOS */
         font-weight: normal;
         font-style: normal;
    }

Here's the link to the site!

Thanks

Answer 1

TRY USING AN ABSOLUTE URL

@font-face { font-family: 'UniversUltraCondensedRegular'; src: url('../fonts/univers-ultracondensed-webfont.eot');

becomes

@font-face { font-family: 'UniversUltraCondensedRegular'; src: url('http://www.yourdomain.com/fonts/univers-ultracondensed-webfont.eot');

Answer 2

In theory, the CSS you provided should work. Most likely, your problem is caused either by using the wrong paths or by having the wrong file permissions for your font files.

How to tackle this issue :

First, test whether everything works correctly if you use absolute paths (as zaba suggested).

• If that does work, it means your paths are incorrect. In that case, make sure the path is relative to the CSS file that contains the @font-face statement.

• If that doesn't work, then your issue is probably not related to the pathname. In that case, check whether the file permissions are OK for your font files and the folder it's in.