Multiple font formats at a time

[purem]

Some stats compiled as to why it would be good to do this:

Total percent of users using a browser with
some support for @font-face: 93.09%
support for WOFF 76.61% (17% of users with some support excluded)
support for TTF 66.47% full, 16.03% partial -> 82.5% total (11% of users with some support excluded totally, 27% with support))

Summary stats
Best for IE -> EOT
Best for firefox -> TTF/OTF
Best for Chrome -> SVG/TTF/OTF
Best for Safari -> TTF/OTF
Best for Opera -> SVG
Best for iOS Safari -> SVG
Best for android -> TTF
Best for blackberry -> TTF/OTF / SVG
Best for opera mobile -> TTF/OTF/SVG
Best for chrome for android -> TTF/OTF/SVG
Best for firefox -> TTF/OTF/WOFF

Comments
To support anything before IE 9 you need to use EOT. IE only has partial support of TTF with @font-face.
To support old versions of iOS safari and opera you need SVG
TTF/OTF seems to trump WOFF in terms of compatability in all respects however the smaller file size of WOFF is obviously prefered.

Stats from:
http://caniuse.com/fontface
http://caniuse.com/woff
http://caniuse.com/ttf
http://caniuse.com/svg-fonts
http://caniuse.com/eot

To remedy this we can write fonts in all formats and then either:

A.) Use multiple font-face formats in the declaration. Font squirrel http://www.fontsquirrel.com/fontface/generator recommends the following as its "optimal" layout, "Recommended settings for performance and speed.". Its recommended by Paul Irish who knows his stuff and has done a long blog post on the ins and outs of @font-face declarations http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

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

}

Quick Explaination
The first declaration is for IE9 / IE10 as EOT is the prefered font (IEs format so supposdely it does a good job at it).
The second for IE8 and below. It will take the last src: statement as the one to use. IE8 and below have a bug in their parsers which results in 404s when more than one font is included in a src declaration. The ?#iefix tricks it into thinking everything after the ? is a query string and so it skips the other font formats.
http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8
The woff, ttf and svg fonts are read by the rest of the browsers if they can read them (see above for importance of all types if maximising compatability).
All browsers should only load one font so bandwidth really isn't an issue.

B.)
If they do, we could take the aproach that scribd takes and detect browsers before injecting a css file containing the fonts in the most relevant format. This would require writing a separate css file for each font type which contains all required fonts.

Neither are too hard to implement and will result in increased support. I propose that we make A. the default as this version doesn't require JS.

[jahewson]

Its recommended by Paul Irish who knows his stuff and has done a long blog post on the ins and outs of @font-face declarations http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

This is now 4 years old, a lot has changed in that time.

[jahewson]

To support anything before IE 9 you need to use EOT. IE only has partial support of TTF with @font-face.
To support old versions of iOS safari and opera you need SVG

pdf2htmlEX uses many HTML5 features which may not work in these browsers, which need to be taken into account. If your goal is old browser support, then supporting old fonts is not necessarily enough.

[jahewson]

The first declaration is for IE9 / IE10 as EOT is the prefered font

EOT is only needed for IE <= 8, IE10 supports WOFF and TrueType, IE9 supports TrueType (with "installable" flag set).

[jahewson]

To support anything before IE 9 you need to use EOT.

Yes, but FontForge won't produce EOT files. Another tool will be needed...

[jmbowman]

One such tool: http://code.google.com/p/ttf2eot/wiki/Demo

Even if there are other showstoppers for supporting older browsers, it'd be nice to see how much of a difference this one change would make; it's the most obvious problem at the moment. Maybe add a "--legacy-support" parameter which attempts to generate HTML that older browsers can cope with, while leaving it unset still produces clean, simpler HTML5 for newer browsers? But even in newer browsers, supporting multiple font formats would be useful for the reasons listed above (different sizes, different ones work better in different browsers). Which font(s) to use depends pretty heavily on your use case, so being able to customize this would be nice.

[coolwanglu]

I will test how much EOT will fix for IE <9.

We can specify ttf2eot through --external-hint-tool to produce eot files, also need a new entry in pdf2htmlEX to produce proper mime type.

I'll try to find an IE8 first though..

[jahewson]

I'll try to find an IE8 first though...

Try https://browserlab.adobe.com/en-us/index.html

[wilr]

Any progress on this? woff is great but rendering isn't flash in Windows (choppy as hell). The bulletproof syntax would be good http://www.fontspring.com/blog/smoother-rendering-in-chrome-update

[coolwanglu]

@wilr There hasn't been anyone submitting PR for this. Not sure how many people actually need this.

[duanyao]

EOT is for IE8-, however pdf2htmlEX is not targeting at IE8-, because they don't support CSS transform, which would ruin the entire layout.

It seems ttf/otf + woff are needed to cover all modern browsers. If you don't care stock android browser before 4.4, woff is enough(http://caniuse.com/#search=woff); if you don't care IE mobile, ttf/otf is enough (http://caniuse.com/#search=ttf).