Solved

Help, @font face not working in ie

Posted on 2011-02-22
14
697 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 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