I've been building a website (http://www.hallometmirel.nl/troep/website) with a responsive layout and have been testing the various resolutions in several browsers and resolutions on my laptop and on my Galaxy S3.
Seeing as I can't get Internet Explorer on Google Play, I'm now testing the website on a Nokia Lumia 800 from work. It seems to be running Windows Phone 7.5, and since I can't find a button which displays which version of IE it is, and the smartphone being quite new, I suspect it's IE 9.
@font-face has been working so far in the latest version of Opera, Firefox, Chrome (desktop and mobile) and IE 9 (desktop).
I really have no idea why it wouldn't work in the mobile version, even if it's an older one, font-face is supported by older versions, right? I've tried tricking IE into showing the font by changing the .eot type or including a smileyface (apparently it does something). I can't find other topics with regards to the mobile version of IE.
This is the doc type, it might have something to do with IE9:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl-NL">
<head xmlns:og="http://ogp.me/ns#">
And this is the way I embed the font:
@font-face {
font-family:'ChaletComprime-CologneEighty';
src:url('fonts/ChaletComprime-CologneEighty.eot');
src:url('fonts/ChaletComprime-CologneEighty.eot?#iefix') format('embedded-opentype'),
url('fonts/ChaletComprime-CologneEighty.woff') format('woff'),
url('fonts/ChaletComprime-CologneEighty.ttf') format('truetype'),
url('fonts/ChaletComprime-CologneEighty.svg#svg/ChaletComprime-CologneEighty') format('svg')
}
And use it like this:
h1,h2,h3,h4,h5,h6{font-family:ChaletComprime-CologneEighty;color:#ef0f63;text-transform:uppercase}