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/

I'm probably doing something really stupid here. I've been staring at this code for waaaaaaaaay too long. — imbecile, Feb 17 '14 at 12:08
@enyce12 Unfortunately, no. The website mentioned in the q is the only one I can give (and that one it works perfectly in IE10 fyi). — imbecile, Feb 17 '14 at 12:10
So what *are* you doing, as opposite to creating “a separate html file with a few elements to test the fonts”? Does the code posted actually reproduce the problem if the HTML code is placed in a document that links to a stylesheet containing the CSS code and there is nothing more involved? And what does “does not work” mean here? The font does not show, some ligatures (which?) do not work, the page gets filled with pink elephants, or what? — Jukka K. Korpela, Feb 17 '14 at 12:13
@JukkaK.Korpela No pink elephants. merely that the ligature text is not replaced by the expected ligature appearnace. I wanted to see if anyone else had the same issue. — imbecile, Feb 17 '14 at 12:17
You really need to address the questions asked and provide a *testable* case. — Jukka K. Korpela, Feb 17 '14 at 12:48

allcaps · Accepted Answer · 2014-02-17T17:04:02.957

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:

Font file isn't where you say it is.
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:

404

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

Agree, but how do you insert a image in a comment? I'll edit it to make it an answer. ;) — allcaps, Feb 17 '14 at 15:06
@allcaps Well, the font file was exactly where it was supposed to be. I did some "tweaking" with re-positioning the font-face rule and it seemed to work after that. I'm still not sure why it didn't work. A conflict with another font-face rule doesn't make sense, as there was no other rule which was importing a custom font. — imbecile, Jun 04 '14 at 05:29

Kudakurage Ligature fonts in IE10

1 Answers1