How to insert a custom font and Optimizing @font-face for Performance

FOUT is what I'm calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.
To resolve this problem, follow the next instrunctions.
Choose a font going to http://www.fontsquirrel.com, click on @font-face generator and download font files and the script to insert into your css file. The following example works with all browsers.



For example:

@font-face {
    font-family: 'TheanoDidotRegular';
    src: url('theanodidot-regular-webfont.eot')    src: local('☺'), url('theanodidot-regular-webfont.woff') format('woff'), url('theanodidot-regular-webfont.ttf') format('truetype'), url('theanodidot-regular-webfont.svg#webfontMVvmCb8W') format('svg') !important;
    font-weight: normal;
    font-style: normal;
}

Now, you have to optimize the script for Firefox.
First of all, it’s another http request, and we know that the golden rule of web performance is to keep http requests to a minimum. Secondly fonts aren’t even small files, they can be 50k+ in size. Lastly the lag of fonts loading last means you page seems to morph into it’s final form.
Here’s a cool little optimization. By using a data: url you can use the font inline by encoding in base64. For example:

@font-face {

    font-family: "TheanoDidotRegular";

    src: url("data:font/opentype;base64,[base-encoded font here]");

}

body {

    font-family: "TheanoDidotRegular", serif

}

To convert a file in BASE64 go to http://www.scalora.org/projects/uriencoder/ site.

Firefox use the .woff font file, so you have to convert .woff file in base64, after that insert the string into your CSS, like this:

@font-face {
    font-family: 'TheanoDidotRegular' !important;
    src: url('theanodidot-regular-webfont.eot') !important;
    src: local('☺'), url("data:font/opentype;base64,[base-encoded font here]") format('woff'), url('theanodidot-regular-webfont.ttf') format('truetype'), url('theanodidot-regular-webfont.svg#webfontMVvmCb8W') format('svg');
    font-weight: normal;
    font-style: normal;
}

Now, HTML header iclude your font!