What is the status of TTF support in Internet Explorer?

Question

I'm trying to determine the status of support for the TTF font format on Internet Explorer. (I don't have any Windows machines on hand to try it with.) The table at caniuse states that IE from version 9 onwards supports TTF but "only working when [fonts are] set to be installable". What does that mean? That page links to a blog post on MSDN, which describes updated font support on IE9. It isn't very clear or explicit; I think the "raw fonts" being referred to mean ttf and otf. It says "supported font formats include ... raw fonts with embedding permissions set to installable"

So, in summary:

• Does IE support ttf fonts at all?
• If ttf support exists, does it differ among IE9, IE10, and IE11?
• What does "embedding permissions set to installable" mean in reference to ttf fonts?

Solution 1

So as I mentioned in my question above, Internet Explorer has some ttf support starting with version 9, but "only working when [fonts are] set to be installable".

Some background:

...TrueType fonts have embedding "bits" which allow the creator of the font to decide the level of embedding that will be permitted. There are four different embedding bits: (1) no embedding, (2) embedding for view and print only, (3) embedding for view, print and editing, and (4) installable embedding.. Many small type design houses have set their embedding bits so that embedding of any kind is not permitted. ...

Source (also contains a lot of other information on this) and here's Another source with similar info

In another question, dealing with the embedding bits was discussed. It was revealed there that the Font Squirrel webfont generator automatically deals with these embedding bits by default on most fonts. Since I had ran my font through font squirrel I was good to go. I tweaked my CSS to prefer TTF over WOFF for testing and obtained the following results using webpagetest:

• IE8 Did not work with TTF. It fell back to EOT
• IE9 Worked with TTF
• IE10 Worked with TTF

Note that I did not test fonts without the embedding bits set to installable, no I cannot say anything about that. But the general conclusion is that TTF fonts work in IE 9 onwards when the embedding bits are set to installable

Solution 2

Just google internet explorer ttf support or alike which would give you lots of information like eg http://www.fontspring.com/blog/fixing-ie9-font-face-problems

IE support for TTF is unclear: some sites claim support (like caniuse) other deny that (like http://webfonts.info/node/379)

In a ttf file there is information on what a user is allowed to do with the font. For TTF fonts to be allowed to be used in websites the font's embedding bits must be set to installable. The 'embedding bits' refer to fsType information in the OS/2 table, and 'installable' means that all fsType bits are off. So even if a browser supports TTF the font's foundry could deny usage of particular fonts.

Comments

[djangodude]

The term "raw fonts" is used to distinguish from "encapsulated" formats such as woff and EOT (in both of those formats, the guts are actually some form of TTF/OTF but compressed/encoded differently).

[Danield]

According to font squirrel TTF - Works in most browsers except IE and iPhone.

[Taylor Taff]

TTF fonts are (currently) working correctly on both iPhone 4 & iPhone 5 using (stock) Safari

[user334639]

"I tweaked my CSS to prefer TTF over WOFF". How do you do that?!

[JC Hulce]

@user334639 I put TTF before WOFF in the font-face CSS. Browsers usually use the first listed font format that they support, do that's how it works. Note that this is against the "bulletproof" syntax.

[user334639]

Good to know! Is there a reference where you learned it? Is it part of the specs?

[JC Hulce]

@user334639 yep, here's the spec: w3.org/TR/CSS2/fonts.html Browsers iterate through the listed fonts until they find one that they support, which they then use.

[user334639]

That's about font-family, not @font-face. Anyway, I did some tests and indeed that's how it works. The test was simple: just point to different fonts and you can see the results rendered.