woff base64 in stylesheet missing

[blasp...@gmail.com]

When I select the "Encode & Embed Font in CSS" option when generating a font, the woff embedding is missing in the stylesheet. Only the ttf is embedded. What is going wrong?

[Keyamoon]

Nothing is wrong. TTF fonts are more widely supported among browsers. Some older browsers do not support WOFF fonts, while they do support TTF. To reduce the size of the CSS as much as possible, it is best to embed only one font format. Therefore, the best choice is embedding the TTF.

[blasp...@gmail.com]

Ah that's too bad... We only use the woff and eot file(for old IE browsers).

[Keyamoon]

I wouldn't recommend that. If you're only using woff, your font won't be supported in older Android and iOS browsers. Also, your CSS will be unnecessarily larger. There's nothing wrong with only embedding the TTF.

[cric...@gmail.com]

Honestly, I'd still like the option to include one or both of them. I'm seeing spotty .ttf support for IE 8-10. Granted, right now I'm testing via the developer tools emulator on a Windows 8 machine; but still. I'm worried that somewhere out there people aren't seeing my icons.

In terms of support, I've always used: caniuse.com
http://caniuse.com/#feat=woff
http://caniuse.com/#feat=ttf

I see a lot go solid green for .woff; but a little less for .ttf. What are you using for your source when determine what is and isn't widely supported? Is there a better data source out there?

Thanks for reading, BTW
~C

On Friday, April 17, 2015 at 6:54:45 AM UTC-7, Keyamoon wrote:
> I wouldn't recommend that. If you're only using woff, your font won't be supported in older Android and iOS browsers. Also, your CSS will be unncessarity larger. There's nothing wrong with only embedding the TTF.

[Keyamoon]

Thanks for the feedback.

IE 8 does not support WOFF or TTF fonts. It supports EOT fonts. But IE 8 or older don't support embedded fonts, so you would have to link to external EOT files. CSS files generated by IcoMoon do that.

If you look at the "Resources" tab on the caniuse page for TTF, and follow the link to the stackoverflow page, you will find this answer:

Internet Explorer has some ttf support starting with version 9, but "only working when [fonts are] set to be installable"

TTFs generated by IcoMoon are set to be installable. There is a flag called "fsTpe" in the "OS/2" table which should be set to zero, in order to make the TTF "Installable Embedding". If you are interested, see this spec page for more info. IcoMoon does set this flag to zero.

Besides that, I have tested IcoMoon's embedded TTF fonts in IE9 and IE10 in Windows 7. They work without any problem.

In the case of embedded fonts, TTF would also be smaller in size compared to WOFF. Why? Because you would ideally be gzipping your CSS. The compression used in WOFF 1.0 is the same as gzip. However, WOFF fonts are basically a wrapper around TTF fonts; so WOFF fonts would have a slight overhead too.

For the very best optimization, you would probably want to use WOFF 2.0 fonts (which offers better compression compared to gzip), but they are not widely supported at all. Therefore, if you decide to embed WOFF 2.0 fonts, you would need to also embed another format to compensate for the lack of browser support for WOFF 2.0; which again means an unnecessarily larger CSS. I guess the conclusion should be clear now: For embedding, TTF fonts provide both the best optimization and browser support, without any drawbacks compared to WOFF or other formats.

[cric...@gmail.com]

WOW. That was a thorough and excellent answer. Thank you very much!

[Benson Trent]

I was confused why I was only seeing TTF rather than WOFF when embedding the font in the CSS as well, thanks for the great answer and amazing app!