Embed fonts in your web page using Data URI

In web applications you can embed images into a html page by base64 encoding an image and add it to the css on your page by using Data URI. Data URI is just a URI scheme that provides a way to include data in-line. Usage is simple, you create an ASCII string format representation from your binary data using Base64 encoding. The generated string is then stored in the css. Instead of using an URI to an image, you use the Data URI instead. The format of this URI looks like this:

data:[<mediatype>][;base64],<data>

An example of an encoded image looks like this:

	#main {
	background-image: url('data:image/png;base64,/*Removed base64 encoded image*/');
	}

view raw embeddedimage.css hosted with ❤ by GitHub

This is nothing new, but did you know that you can do the same thing for fonts?

	@font-face {
	font-family: "Sample-Font";
	src: url(data:application/x-font-woff;charset=utf-8;base64,/*Removed base64 encoded font*/) format('woff');
	font-style: normal;
	font-weight: 200;
	}

view raw embeddedfont.css hosted with ❤ by GitHub