Solved

Help, @font face not working in ie

Posted on 2011-02-22
14
692 Views
Last Modified: 2012-05-11
http://www.k-mac.ca/Test/

The @font face fonts don't seem to be working in all versions of IE, they work when i test locally but not when its up on the web.  Seems to work fine in firefox and chorme.  Please help
0
Comment
Question by:leena42
  • 6
  • 5
  • 2
  • +1
14 Comments
 
LVL 3

Expert Comment

by:WebCricket
ID: 34956969
Check out this article http://randsco.com/index.php/2009/07/04/p680 for more help with IE and @font-face. It looks like you need to upload to versions of the font file. One in TTF (true type font) for most browsers and IE needs a EOT (Embedded OpenType font) font type. They have a free tool that will help you create the EOT file using Microsoft WEFT - http://www.microsoft.com/typography/WEFT.mspx
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34956977
Font looks the same in FF 3.6 (4) and IE 5,7,8,9.
0
 

Author Comment

by:leena42
ID: 34957057
SSupreme, I've attached a file of the way I'd like it to look.


WebCricket - I have uploaded the fonts, but I'll check out the links you sent and get back to you.
NEW---Copy--2-.png
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34957098
In this case font looks the same but it's wrong appearance.
Check whether you added your fonts to folder /type/~
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34957134
Try putting your "stylesheet.css" inclusion (in the header) ABOVE "text.css"


<!-- stylesheet.css should come before text.css -->
<link href="Styles/stylesheet.css"  rel="stylesheet"  type="text/css" charset="utf-8"/>
<link href="Styles/text.css" rel="stylesheet" type="text/css" media="screen" />

Open in new window

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35087564
Do you mind if I ask... did this work?
0
 

Author Comment

by:leena42
ID: 35087608
To be honest, it was so long ago I can't remember what worked.  I believe your idea helped me to slove the problem.  The order of the style sheets are as follows and it works across all browsers as far as i know

<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,100italic,light,lightitalic,regular,regularitalic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" />
 
<link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css" />
 
<link href="Styles/reset.css" rel="stylesheet" type="text/css" media="screen"  />
 
<link href="Styles/960.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Styles/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Styles/tonic_gallery.css" rel="stylesheet" type="text/css"/>  
<link href="Styles/colorbox.css"  rel="stylesheet" type="text/css" />  
<link href="Styles/text.css" rel="stylesheet" type="text/css" media="screen" />

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:leena42
ID: 35087618
it's up live now, www.k-mac.ca  if you want to check it out for yourself :)
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35087676
thanks for that.  As an expert here at EE, I appreciate you accepting my solution... however in terms of keeping the knowledge base full of reliable information, I would ask that you only accept answers if they actually work.  The reason is, someone may have the same problem as you, they find this post, and they see my "answer".  They should be able to rely on that answer as a viable solution to their problem.

If you happen to get a second, would you try switching those 2 lines of code (put the stylesheet.css AFTER text.css), and see if the problem comes back.  You don't have to do this, but I am actually kind of curious myself as to whether my solution actually worked.

Thanks.
0
 

Author Comment

by:leena42
ID: 35087763
Okay, as I was going to test this... I remembered something. When I asked this question I was using some styles I downloaded from Font Squirrel.  I ended up using Google web fonts instead.

http://www.google.com/webfonts and that seemed to work great for me. * Note the first two style sheets on lines of my earlier post.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35088902
Ah, ok.  Well, its no big deal really, but in the future please don't mark an answer unless it truly solved your problem.
0
 

Author Comment

by:leena42
ID: 35088929
Alright, I just wanted to give you points because you helped out.  So I don't know how I would have been able to do so without making it the answer.  I suppose next time just giving a grade of "c" and mark it as partial answer.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35089205
Well, even if I help... an answer should not be marked unless it really helped you solve your problem.  I'm not trying to make a big deal out of this, but in the future you should:

1) try out the solutions given to you by experts
2) Whether the solution works to doesn't work, respond to the solution by saying "thanks, that worked" (and assign points) or say "sorry, that didn't do it" and let us continue to find a solution.

Like I said, no beg deal... and it's considerate of you to want to assign points for helping... but points should be saved for real solutions.  Just FYI.
0
 

Author Comment

by:leena42
ID: 35095119
I understand trully and don't think you're making a big deal.  I'll make sure to follow those steps next time around.  Thanks for your time and help :)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now