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 I get this from the draft page, uploaded and on IE 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?
IE is really a messy thing. i always use Google Fonts to avoid such problems, they are all browsers compatible
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.
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
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.
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.
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.
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.