?
Solved

Help, @font face not working in ie

Posted on 2011-02-22
14
Medium Priority
?
703 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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 2000 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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

762 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