Add b64 output

[salazarm]

src: url(data:application/font-woff;charset=utf-8;base64,xxxxx)format('truetype')

[jasmussen]

Would love to see this added.

Firefox blocks crossdomain font requests, so if you store your CSS file on a CDN which is common on larger sites, Firefox will block the font request. Base64 encoding the WOFF font and embedding it in the stylesheet sidesteps this issue, since the stylesheet and font file will be located on the same domain.

[folletto]

+1

It will help improving the browser support, and also in certain situations can be an optimization downloading just one piece. :)

[jaydenseric]

+1

Can we merge these commits and get this happening? This is pretty essential. I would like to use this right away.

[jleider]

You should be able to add a cors header to your assets to get around this issue. http://enable-cors.org

Base64 encoding assets adds significant overhead and requiring it in the HTML of every page you need it negates the purpose of using font icons does it not?

[jtomaszewski]

@jleider, Adding CORS header to every asset server I use is much bigger overhead than just enabling us to have b64 encoded font in CSS.

We don't include it in HTML of every page. We include it in CSS which is downloaded only once anyway (because it's gzipped and cached just as a font file).

[jaydenseric]

@jleider Base64 embedding WOFF fonts directly into the stylesheet is arguably best practice in an IE9+ world. They are still vector just the same, but they are downloaded at precisely the same time as the styles and all in one request. As long as your stylesheet is cacheable so are the fonts embedded within.

[KyleAMathews]

+1000 Most of the time I only am using a handful of fonts and it's far more efficient to embed the font directly in CSS.

[KyleAMathews]

Also, embedding the font means you don't get the annoying flash-in when your font loads. I've Base64 embedded fonts for years using icomoon and would like to be able to keep doing that.

[KyleAMathews]

In the meantime I'm using https://www.npmjs.org/package/gulp-cssfont64 and adding the embedded font (w/ my two icons) to my scss project and and am manually editing the css file fontcustom generates to remove its font-face rules. Firefox has icons now!

[marvinli]

+1. This would be so useful!