Kudakurage Ligature fonts in IE10

Question

I've been attempting to use the Kudakurage Ligature fonts on my site. It works in all "modern browsers", however for some reason, it doesn't seem to work on IE10.

If I create a separate html file with a few elements to test the fonts, it works just fine!

The code that I've used is exactly the same, and I've used the debug tool to ensure that none of the CSS rules are over-ridden.

Would really like some help over this issue. I don't want to resort to the old trick of using images on my site again :(

Code used: HTML:

<div onclick="refresh();" class="lsf">refresh</div>

CSS:

@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.11.eot');
    src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols-2.11.woff') format('woff'),
         url('LigatureSymbols-2.11.ttf') format('truetype'),
         url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf {
    font-family: 'LigatureSymbols' !important;
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-font-feature-settings: "liga" 1, "dlig" 1;
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga" 1, "dlig" 1;
    -o-font-feature-settings: "liga" 1, "dlig" 1;
    font-feature-settings: "liga" 1, "dlig" 1;
}

The Kudakurage Ligature font can be obtained at: http://kudakurage.com/ligature_symbols/

Answer 1

Can you see the icons with IE10 on http://kudakurage.com/ligature_symbols/ ? Yes? I thought so. I'm happy for you there is nothing wrong with your browser. ;)

There could be a couple of other things wrong. Most of the time it boils down to:

1. Font file isn't where you say it is.
2. Other CSS problem.

I created a example: http://jsfiddle.net/allcaps/7FL6C/2/ it shows a working example and the fail 'FAIL NO FONT scenario'.

/* FAIL NO FONT scenario */
@font-face {
    font-family: 'LigatureSymbols_1';
    src: url('there/is/no/font/here/LigatureSymbols-2.11.eot');
    src: url('there/is/no/font/here/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('there/is/no/font/here/LigatureSymbols-2.11.woff') format('woff'),
         url('there/is/no/font/here/LigatureSymbols-2.11.ttf') format('truetype'),
         url('there/is/no/font/here/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('there/is/no/font/here/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

In a debugger you get a 404:

The answer to your question is make sure the font loads.