This page demonstrates the “onload” method, which is the most reliable but slower than “asap.”

To see how this script performs make sure you are viewing this on Firefox 3.5/3.6 or Internet Explorer 7–9. Other browsers will not see any differences in web font loading.

*Web font load time is still dependent on the font server download speed.

Installing FOUT-B-Gone

Begin by downloading the foutbgone.js, and inserting it in the head of your document after your CSS calls.

<script src="foutbgone.js" type="text/javascript"></script>

Using FOUT-B-Gone

The simplest initialization will look like this:

fbg.hideFOUT('asap');

FOUT-B-Gone hides elements with custom fonts assigned to them. Enter a value, in milliseconds, to increase the time that elements are hidden:

fbg.hideFOUT('asap', 400);

Putting it all together:

<script src="foutbgone.js" type="text/javascript"></script>\
<script type="text/javascript">\
	fbg.hideFOUT('asap', 400);\
</script>

Configuring FOUT-B-Gone

Option
Default
Description
method
asap
fbg.hideFOUT('asap');
fbg.hideFOUT('onload');
delay
100 (ms)
fbg.hideFOUT('asap', delay);
fbg.hideFOUT('onload', delay);

Javascript is currently disabled. This site requires Javascript to function correctly. Please enable Javascript in your browser!