6 Replies - 737 Views - Last Post: 25 February 2013 - 03:08 PM

#1 _ELement_8215  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 14-December 11

dynamically loading a font in IE

Posted 20 February 2013 - 08:25 AM

So, first things first, here's the code:
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url('//themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}

@font-face {
    font-family: "Droid Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Droid Sans Bold"), local("DroidSans-Bold"), url("//themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff") format("woff");
}


...And of course when I'm using that font I'm using
 font-family: Droid Sans,sans-serif; 
, and this works in Opera, Safari, Firefox, and Chrome...but, of course...I'm having issues with IE. After searching the web I found out a few things:
* This font will not convert to eot format, according to onlinefontconverter.com
* IE9 definitely fully supports woff format fonts, and is the version using (and targeting)
* According to the developer tools included with IE, the
 font-family: Droid Sans,sans-serif; 
is definitely being used. Since these tools are not clear about which of the two fonts is in use, I tested it, and it was clear that the font that's being taken is the sans-serif fallback font, instead of the Droid Sans

I would appreciate any guidance or assistance in resolving this issue. Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: dynamically loading a font in IE

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3485
  • View blog
  • Posts: 10,043
  • Joined: 08-June 10

Re: dynamically loading a font in IE

Posted 20 February 2013 - 08:39 AM

quote the 'Droid Sans', spaces in names are always problematic to some extend.
Was This Post Helpful? 0
  • +
  • -

#3 _ELement_8215  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 14-December 11

Re: dynamically loading a font in IE

Posted 20 February 2013 - 08:45 AM

No dice :sad3:
It's still using the sans-serif backup font.

Actually I forgot to post above that one of the things I also tried was to remove all the spaces in all the code between the words Droid and Sans.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3215
  • View blog
  • Posts: 10,784
  • Joined: 12-December 12

Re: dynamically loading a font in IE

Posted 20 February 2013 - 10:24 AM

I think reading through this bullet-proof font-face link will help you to get this working.
Was This Post Helpful? 0
  • +
  • -

#5 _ELement_8215  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 14-December 11

Re: dynamically loading a font in IE

Posted 20 February 2013 - 11:28 AM

Thank you for your reply, unfortunately I haven't been able to solve the issue. Here's what else I discovered to narrow down the problem:

* Most people use fontsquirrel.com/tools/webfont-generator for their @font-face needs...however...it appears that Droid Sans is not allowed by the generator and I get the following error message: "The file is blacklisted by the Generator. You will not be able to convert this font."

So then of course I tried more manual options, but all of those involve somehow having a eot version of the font fall out of the sky by magical intervention (even though this font has failed to convert using two different generators so far and course they didn't work, and by all accounts the woff format should work in IE 9 in the first place).

Then I thought maybe linking directly to the font on Google Web Fonts using "The local reference" method in the found in the link you posted might work, or using the link that had worked in the other browsers but without all the "local()" code per the same suggestion in the link you posted:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: url ('http://themes.googleusercontent.com/licensed/font?kit=s-BiyweUPV0v-yRb-cjciGkmeedIUFc9lctbq-Ow3JbsPXYqTGLZ2U8sggWmBN11vY_KnrbECKVYwT5jML176E-hCdHeAh1EypZggr0U53BuXxQghSWdr5fKRAiL7DYm');
  src: local('Droid Sans'), local('DroidSans'), url('//themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}

@font-face {
    font-family: "Droid Sans";
    font-style: normal;
    font-weight: 700;
    src: url ('http://themes.googleusercontent.com/licensed/font?kit=EFpQQyG9GqCrobXxL-KRMRalYN3WcV2kC-lCSkEghxssW74lMOjTY4qiY9y3N8u8mmZZuPEXUm9QhgLwSTQSb8YE374rgrGU5twsryA-dlb3ENXPRqTW0OIclyPn2srH');
    src: local("Droid Sans Bold"), local("DroidSans-Bold"), url("//themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff") format("woff");
}



OR

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: url ('//themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff');
  src: local('Droid Sans'), local('DroidSans'), url('//themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}

@font-face {
    font-family: "Droid Sans";
    font-style: normal;
    font-weight: 700;
    src: url ('//themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff');
    src: local("Droid Sans Bold"), local("DroidSans-Bold"), url("//themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff") format("woff");
}



...neither of these worked.

So to keep this post from being too long, and someone correct me if I'm wrong, it seems that:

* this is a font that cannot be converted to eot using a generator
* this font is in a format that should work for IE as is, but does not, and I still don't know the reason

And here I am, still stuck...so if anyone has any other guidance, suggestions, or links I'd really appreciate it. Thanks again, and sorry for the wall of text.
Was This Post Helpful? 0
  • +
  • -

#6 _ELement_8215  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 14-December 11

Re: dynamically loading a font in IE

Posted 20 February 2013 - 01:58 PM

Okay, I figured it out by accident while working on another site, posting the solution in case others encounter the same problem:

Apparently the default Document Mode for IE 9 is IE 8 Standards. Bizarre and rotten as this is, the font works perfectly with this mode changed to IE 9 Standards, however most of the rest of the code for the page breaks. So after all this, it looks like I'm going to have to use a work-around instead. But hopefully others will benefit from this information so it may not be all in vain! ^_^
Was This Post Helpful? 0
  • +
  • -

#7 _ELement_8215  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 14-December 11

Re: dynamically loading a font in IE

Posted 25 February 2013 - 03:08 PM

After some more research (and a lot of trial & error) I found a non-work-around fix. Posting for those interested in a real solution to this problem:

In IE8, specifying @font-face within the same style sheet as the rest of your styles will not work. You must link to a separate style sheet that contains this information (with everything formatted properly for the targeted browsers of course). That link must be within the <HEAD> of your html document at the top.
Also, if you are targetting Firefox, you must also include:
<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>'


WITHIN THE SAME DOCUMENT AS YOUR @FONT-FACE DECLARATION

So, that's it, hopefully I've managed to save someone else the week or two of frustration I just went through! Please let me know if I was unclear in any way and you are having difficulty implementing these fixes. I'd be happy to help!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1