Last Updated: February 25, 2016
·
2.57K
· girlie_mac

Using Base64 for web fonts optimization

@font-face {
font-family: "Foo Font";
src: url("data:font/woff;charset=utf-8;base64,d09GRgABAAAAAGClABAAAAAAnNgAAM9cAABe/AAAAakAAAMEAAAAAAAAAABPUy8yAAABbAAAAFYAAABgSbF2LFZETVgAAAHEAAADfwAABeB2WH3TY21hcAAABUQAAAFJAAABshR48zZjdnQgAAAGkAAAANcAAAIuKKskI2ZwZ20AAAdoAAAE1QAACBAiFFuWZ2FzcAAADEAAAAAQAAAAEAAZACNnbHlmAAAMUAAAPjwAAGIw8iQXHmhlYWQAAEqMAAAANgAAADbiG4BKaGhlYQAASsQAAAAgAAAAJBDeCEBobXR4AABK5AAAAj4AAAOIfVlfWWtlcm4AAE0kAAALOgAAF46/XtNnbG9jYQAAWGAAAAJZAAADkAAtY9RtYXhwAABavAAAACAAAAAgA28BjG5hbWUAAFrcAAACbQAABiiMZ7WicG9zdAAAXUwAAAATAAAAIP9RAHdwcmVwAABdYAAAAZwAAAHrp0oXK3jaY2Bm...");
}

body {
font-family: "Foo Font", san-serif;
}

2 Responses
Add your response

Already used and very powerful tip !
http://coderwall.com/p/kkmq0q

over 1 year ago ·

Be sure to keep data uri size 32k or less if targeting IE8.

over 1 year ago ·