www.webdeveloper.com
Results 1 to 5 of 5

Thread: IE9 ignoring font-family style

  1. #1
    Join Date
    Oct 2012
    Posts
    5

    IE9 ignoring font-family style

    Hello,

    I have developed a site (built in a 3rd party tool which is frankly, ****) and for some reason despite me having the following style at the top of my css stack (Which I have confirmed is not being overwritten via F12) body { font-family: Calibri, Arial, Helvetica, sans-serif; } which works fine in Firefox, Chrome, Safari, IE7, IE8, IE9 - Quirks Mode, IE9 - IE7 Standards and IE9 - IE8 Standards and IE10 however when the page loads in IE9 with IE9 Standards the font renders as Times New Roman.

    I am at a loss as to why IE9 in IE9 document mode renders the font as Times New Roman when the CSS lists a series of San-Serif fonts and defaults to san-serif even, while every other browser, version of IE and even every other document mode in IE9 works correctly. The only thing I can think of is an issue with the Doc-type but I am not very familiar with the doc-type and how they would affect this.

    You can view a stripped down version of this site here: https://dynamicevents.emeetingsonlin...ame=SITE293396 I had to remove most of the site's content because they client is very protective of their content and who they are however you can still see the issue with the font.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,144
    First off, yes, you should be using a complete <!DOCTYPE> statement to set browsers to Standards Compliance Mode so that they're all at least *trying* to follow the rules. Otherwise, browsers use "Quirks Mode", and each browser has its own unique foibles. This could be one reason why IE is balking at your code. But even if it isn't the cause of this issue, you'll save yourself a lot of problems in the future if you always use a complete <!DOCTYPE>. Search on "doctype switch" for more information.

    I've also read that you need to put your @font-face declarations at the start of your stylesheet. I don't remember the details or where I saw it. But its the sort of thing that usually means there's one browser family out there that requires it, and there's no reason not to, so I just do it out of caution now.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2012
    Posts
    5
    I didn't set up the doctype on this site, it's generated by the third party software that hasn't been updated since like 2005. I just finally got the devs to remove the line of code forcing the sites to render in IE7 mode. I'll let the devs know I need them to update the doctype for our sites. I'm not sure what you mean by the complete doctype. In my sites I typicly just use what comes standard with boilerplate which is just "<!DOCTYPE>"

    I can move the @font-family up as far as possible, but I can only add css into the body of the document where I insert the header html, I don't have access to any of the css documents.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,144
    As I said, search on "doctype switch" and you'll learn all about the various <!DOCTYPE>s and why this is important for web designers. Until you get that right, you'll always be fighting cross-browser compatibility issues unless you never use anything more complicated than tables.

    As far as the rest, all you can do is try moving the @font-face declaration as high as you can. Good luck!
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Oct 2012
    Posts
    5
    Finally figured out what it was. The devs for the tool I use had some CSS that said "font-family: ;" commented out but left in the code and for some reason IE was reading that and defaulting to no font-face while the CSS preview from F-12 ignored it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles