1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE not finding font information

Discussion in 'CSS' started by sarahk, Apr 15, 2014.

0
  1. #1
    A client has a lovely new website that looks great in all browsers, even IE

    except that IE loses the fonts

    I get this from the live page
    upload_2014-4-16_9-45-1.png

    I get this from the draft page, uploaded and on IE
    upload_2014-4-16_9-40-45.png

    In the live page I've moved the font declarations to the top of the stylesheet - no change
    and made the relative paths to the font files into full paths, complete with url

    
@font-face {
    font-family: 'Conv_pt-sans.bold';
    src: url('http://static.mysite.org/css/fonts/pt-sans.bold.eot');
    src: local('☺'), 
                url('http://static.mysite.org/css/fonts/pt-sans.bold.eot?#iefix') format('embedded-opentype'),
                url('http://static.mysite.org/css/fonts/pt-sans.bold.woff') format('woff'), 
                url('http://static.mysite.org/css/fonts/pt-sans.bold.ttf') format('truetype'), 
                url('http://static.mysite.org/css/fonts/pt-sans.bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
    Code (markup):
    I can't see the difference in the html or css that would make the draft work and the live not work.

    What little IE bugs might I be missing?
     
    Solved! View solution.
    sarahk, Apr 15, 2014 IP
  2. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #2
    IE is really a messy thing. i always use Google Fonts to avoid such problems, they are all browsers compatible
     
    xXxpert, Apr 15, 2014 IP
  3. #3
    What is... what is... this?
    local('☺'),

    That's gibberish.

    That said, you have invalid characters all over the place; remember, the ONLY characters you should be using in CSS is the bottom 7 bits of ASCII -- EVERYTHING else, even if you declare utf-8 with @, is invalid/buggy/broken. Likewise I don't think periods are valid in font names.

    Also since you are apparently using a BOLD font shouldn't the declaration be bold, so that where you call it can be BOLD for the fallback fonts?

    @font-face {
	font-family: convPtSansBold;
	src: url('http://static.mysite.org/css/fonts/pt-sans.bold.eot');
	src:
		url(http://static.mysite.org/css/fonts/pt-sans.bold.eot?#iefix) format('embedded-opentype'),
		url(http://static.mysite.org/css/fonts/pt-sans.bold.woff) format('woff'), 
		url(http://static.mysite.org/css/fonts/pt-sans.bold.ttf) format('truetype'), 
		url(http://static.mysite.org/css/fonts/pt-sans.bold.svg) format('svg');
	font-weight: bold;
	font-style: normal;
}
    Code (markup):
    Would be what I'd have... just be sure to say BOLD on your declarations where you call it... for example:

    font:bold 100%/150% convPtSansBold,arial,helvetica,sans-serif;
    Code (markup):
    side note, you only need quotes when there are spaces in the font name or url...

    Though I'd probably axe the webfonts unless you are using them with an eyedropper; they render like crap on freetype, differently across browsers, and cause major legibility issues (which is why I'd only use them on really large headings and NEVER on flow text).

    I've soured on webfonts completely due to their abuse by artsy fartsy types to make websites harder to read.
     
    deathshadow, Apr 15, 2014 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    I've never used them before but the designer did and the client has approved the design so it's my job to make it work.

    I'd never seen the smiley face thing before but google searches tell me it's to stop ancient versions of IE from trying to download the font file.

    Oddly enough this client has a huge amount of users on IE8 - I suspect some other browser is spoofing IE8, or I'm going to have to assume a large number of Kiwis are living under rocks!

    I'm heading out mountain biking :) but will get stuck in when I get back.

    thanks
     
    sarahk, Apr 15, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    That seems pretty stupid since it works just fine even on the ancient browsers -- unless the developer is worried about IE 4, there's no reason to do that.

    Designers... bah... well there's your problem -- nothing like someone who knows jack **** about accessibility lead a client down the garden path to failure.

    I was going to go for my nightly ride (I try to bike 2 to 3 miles a night), but it's 37 out, with rain that's supposed to turn over to snow any time now.
     
    deathshadow, Apr 15, 2014 IP
    sarahk likes this.
  6. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #6
    IE is still a browser? LOL
     
    sundaybrew, Apr 15, 2014 IP
    sarahk likes this.
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #7
    Thanks @deathshadow worked a treat

    I also noticed this when I was editing and testing - but only for the @font-face where they had the dodgy names
    I managed to get back to the car before the rain started. A week ago we had 31C days on end but now we seemed to have flicked the switch and are doing autumn properly with a noticeable drop in temp. I help coach a youth squad and we're back to lights and thermals.
     
    sarahk, Apr 16, 2014 IP
  8. stan5050

    stan5050 Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    I think is time to learn programming
     
    stan5050, Apr 16, 2014 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #9
    I know the absolute minimum about css and am happy to pay designers for their expertise. In this case there was some kind of disconnect between the draft page and how it integrated with the CMS.

    Potentially it was because the css and the fonts were on one subdomain and the page being displayed was on another - given that the draft had all files on the same subdomain and the cross-origin request error I found.

    Just saying that I need to learn how to program really adds nothing to this discussion.
     
    sarahk, Apr 16, 2014 IP
    ryan_uk likes this.
  10. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #10

    WOW - That was RUDE LOL
     
    sundaybrew, Apr 16, 2014 IP
    malky66 likes this.
  11. Spoiltdiva

    Spoiltdiva Acclaimed Member

    Messages:
    7,738
    Likes Received:
    2,895
    Best Answers:
    53
    Trophy Points:
    520
    #11
    Agreed, not only rude but stupid/pointless as well.
     
    Spoiltdiva, Apr 16, 2014 IP
    malky66 likes this.
  12. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #12
    Just like all his other posts
     
    malky66, Apr 16, 2014 IP
    ryan_uk likes this.
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    I'm ok with statements like stan5050's... unless of course, YOU FAIL TO BACK IT UP WITH AN EXPLANATION.

    In which case, excellent use of the banhammer.
     
    deathshadow, Apr 17, 2014 IP
    Spoiltdiva likes this.