Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 710
  • Last Modified:

Help, @font face not working in ie

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
leena42
Asked:
leena42
  • 6
  • 5
  • 2
  • +1
1 Solution
 
WebCricketCommented:
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
 
SSupremeCommented:
Font looks the same in FF 3.6 (4) and IE 5,7,8,9.
0
 
leena42Author Commented:
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
Independent Software Vendors: 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!

 
SSupremeCommented:
In this case font looks the same but it's wrong appearance.
Check whether you added your fonts to folder /type/~
0
 
DesignbyonyxCommented:
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
 
DesignbyonyxCommented:
Do you mind if I ask... did this work?
0
 
leena42Author Commented:
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
 
leena42Author Commented:
it's up live now, www.k-mac.ca  if you want to check it out for yourself :)
0
 
DesignbyonyxCommented:
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
 
leena42Author Commented:
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
 
DesignbyonyxCommented:
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
 
leena42Author Commented:
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
 
DesignbyonyxCommented:
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
 
leena42Author Commented:
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now