views:

123

answers:

1

Hello chaps and chapettes,

I've got a bit of a strange one for you (so to speak). I've devised a little 'coming soon' page for my site which, locally, (on a WAMP setup) is working flawlessly - in capable browsers (i.e. Chrome and Safari), the page looks fine and has a nice little CSS3 transition effect upon hover. And in other browsers, the page visibly looks (practically) identical and the hover effect still works, just without the transition.

After uploading to my hosting, the site still looks fine and works fine in Chrome and Safari, but for some reason in Firefox, the @font-face declarations don't seem to have worked and in IE the layout is slightly different.

I'm massively puzzled! The files are identical on my hosting to what I have locally.

The URL is http://iamfriendly.com/

The CSS Files are visible at:

http://iamfriendly.com/wp-content/themes/iamfriendly_comingsoon/css/screen.css

and

http://iamfriendly.com/wp-content/themes/iamfriendly_comingsoon/css/typography.css

Any suggestions would be greatly appreciated!

Richard

+2  A: 

Having files on multiple domains complicates things.

reisio
You're absolutely correct, reisio. I've managed to 'hack' this to work by using (the amazing) font squirrel's base64 embeddable font option.Thanks very much(http://www.fontsquirrel.com/fontface/generator by the way - select Base64 Encode. I recommend selecting your own subsetting too - to reduce the download.)
iamfriendly