Casual Hex

Uncertain about goals, impulsive in online activities.

Google Fonts and Internet Explorer

I've been working on replacing the blogging platform here with Pelican and a new theme for weeks. Yesterday, when I went to test my new site design in different browsers I came across a really freaky, odd issue. My site looked great in Safari, Chrome, Opera, Firefox, and even IE9. However, it was an absolute mess in IE10 and IE11. All text was missing or scrunched up in an ugly mess. I know, I know… Internet Explorer. I may have taken a seven year break from web design and running my own site, but IE issues should never surprise me. I started digging through my style sheets, and to be honest, I was at a complete loss at why it was borked or how to fix it.

I disabled things, removed things, changed things in my stylesheet. I tried modernizr.js. Nothing worked. So I started from the top of my index.html. First thing I tried was to disable the Google Fonts I was using. Tada! Whoa! My site loaded perfectly in IE10 and IE11. Sure, my fonts were defaults, but the site looked great and functioned as it was supposed to, otherwise.

I initally had my fonts loaded something like this:

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js"></script>  
    <script>  
        WebFont.load({
            google: {
                families: ['Oswald', 'Anonymous Pro', 'Open Sans']
            }
        });
    </script>  
    

Then I tried going back to:

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans|Anonymous+Pro' rel='stylesheet' type='text/css'>  
    

Neither worked in IE10 or IE11. I was stumped, as I have limited knowledge on web fonts in general. So I did some more digging. Turns out some of the fonts that Google hosts don't work right in these two browsers. So while I know little to squat about web fonts, I can share the information I found.

After reading these articles I tried going the @font-face route, serving the fonts myself. I used Font Squirrel to create the web fonts and proper style sheet and all was good. I'd rather not serve my own web fonts, but I have not yet figured out a better way. At the moment I'm trying out Teko, Noto Sans and Anonymous Pro. I rather like the three with the site design. But I've already run through a gamut of fonts already, and may still do so.