Why TTF for embedded fonts?

Embedding fonts in CSS can help improve the performance of your page and significantly decrease its rendering time. Linearicons.com uses an embedded TTF font (called AlphaNum20) for its main type.

But what is the best way of embedding fonts? Should you embed all font formats? How about WOFF 2.0 fonts?

The short answer is to only embed the font in one format, which is TTF. The IcoMoon app can do this for you (Generate Font → Preferences → Encode & Embed Font in CSS).

To decrease the size of the CSS as much as possible, only one font format should be embedded. Looking at the caniuse page for TTF support, we can see that it has the best browser support compared to other formats. As noted on the caniuse page, if a TTF font is set to be "installable", then IE would support it without any issues. Fonts generated by IcoMoon are set to "installable" and they have been tested to make sure they work in IE.

Embedding TTF would also yield a smaller CSS file compared to embedding WOFF. That is because WOFF fonts are basically TTF with a wrapper/overhead, and WOFF 1.0 uses gzip compression. Therefore, if the CSS is to be gzipped, embedding TTFs (which don’t have extra WOFF headers) would result in a smaller file size.

For the very best optimization, you might want to consider using WOFF 2.0 fonts (which offer better compression compared to gzip); but they are not widely supported yet. Therefore, if you decide to embed a WOFF 2.0 font, you would additionally need to embed the font in other formats to compensate for its lack of browser support; which means an unnecessarily larger CSS. The conclusion is that for embedding, TTF fonts provide both the best optimization and browser support, without any drawbacks compared to WOFF or other formats.