Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

always .wf-active on IE8/9 #212

Closed
luboslives opened this issue Jan 12, 2015 · 1 comment
Closed

always .wf-active on IE8/9 #212

luboslives opened this issue Jan 12, 2015 · 1 comment

Comments

@luboslives
Copy link

I'll preface this by saying I'm running IE8 and 9 inside virtual machines in VirtualBox, just in case that has any bearing, but I've done a quick google search of this issue and haven't found one mention of it.

I'm loading up a font from my own server with this in my header:

    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js"></script>
    <script>
        WebFont.load({
            custom: {
                families: ['Script']
            }
        });
    </script>

Font family is defined in my CSS (via Font Squirrel generator) as:

@font-face {
    font-family: 'Script';
    src: url('../fonts/script.eot');
    src: url('../fonts/script.eot?#iefix') format('embedded-opentype'),
         url('../fonts/script.woff2') format('woff2'),
         url('../fonts/script.woff') format('woff'),
         url('../fonts/script.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I specifically assign the font to the .wf-active class:

font-family: 'Script', serif;

And my fallback, declared both on the body and on the .wf-inactive class, is:

font-family: Georgia, Times, 'Times New Roman', 'Droid Serif', serif;

I rename the "fonts" folder to test out the loading and inactive states, and all goes according to plan in every single browser that I can test, aside from IE 8 and 9, which both incorrectly assign the .wf-active class to the body.

I could live with this error if it would just load up my fallback fonts, but instead i see the most garish font where my 'Script' font should be displaying:
more

IE8 attempts to display the word in the missing font and i either get garbled characters or this cursive font from out of the blue (possibly because im using a generic name like 'Script'?):
cursive

This is all due to having the active class assigned to the body when the font is not present. Is there something wrong with my code? Why only these two browsers then?

@bramstein
Copy link
Contributor

This is a very old ticket, but I'll try to answer and then close the ticket (feel free to reopen). I think the issue is a broken EOT font. If it works in other browsers your WOFF2, WOFF and TTF file are probably fine. IE9 will use the EOT file if you include it. You can confirm this if you remove EOT from your @font-face rule and see if it loads.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants