Getting web fonts to work in IE10

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 ... */
}