Getting web fonts to work in IE10 - font-face

Question

I'm trying to make my website more IE-compatible (now that developing for it is less of a nightmare), but I can't get some web fonts to work. Here's my markup:
#font-face syntax:
#font-face {
font-family:Roboto Thin;
font-weight:100;
font-style:normal;
src:url(/fonts/ttf/roboto-thin-webfont.ttf) format("truetype"),
url(/fonts/eot/roboto-thin-webfont.eot) format("embedded-opentype"),
url(/fonts/svg/roboto-thin-webfont.svg) format("svg"),
url(/fonts/otf/roboto-thin-webfont.otf) format("opentype"),
url(/fonts/woff/roboto-thin-webfont.woff) format("woff");
}
Implementation in CSS file:
.animation-text {
font-family:Roboto Thin,Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight:100;
font-style:normal;
text-align:center;
margin:auto;
position: absolute;
background-position: center;
background-size: contain;
animation-fill-mode: forwards;
top: 1px;
}
#design {
transform-origin:50% 75%;
font-size:60px;
color:#ccc;
height:auto;
padding-top:540px;
opacity:0;
z-index:4;
animation-name:text;
animation-delay:3000ms;
animation-duration:500ms;
animation-timing-function:ease-out;
}
HTML:
<div class="animation-text" id="design">Design</div>
I've also tested out the code in the four other major browsers running under OS X (Firefox 19, Chrome 25, Safari 6.1, Opera 12), and they all display Roboto flawlessly. IE10 running under Windows 8 falls back to Arial. Shouldn't including .eot and .otf versions of the fonts have fixed this?

Answer 1

Try quoting the font and removing the space like the following... (you'll need to change the paths accordingly)
#font-face {
font-family: 'RobotoThin';
src: url('Roboto-Thin-webfont.eot');
src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Thin-webfont.woff') format('woff'),
url('Roboto-Thin-webfont.ttf') format('truetype'),
url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
font-weight: normal;
font-style: normal;
}
.animation-text {
font-family: 'RobotoThin',Helvetica Neue,Helvetica,Arial,sans-serif;
/* ... other styles ... */
}