The delicious buffet of @font-face compatible font types has me eagerly implementing fonts all over the place though not excessively. These pages tend to take a slightly longer loading time if the majority of your website uses the technology. Different browsers handle @font-face well, differently. Chrome waits until the fonts are loaded before rendering a page which it then caches so the slower load time only applies to the initial loading. Firefox renders the page with the next default font setting before loading any @font-face fonts.

What I needed was a way for browsers to render a page normally so the viewer will not be faced with what might look to them, a website with missing text. Probably a way to tell the browser to update or inject a css into the page after everything has been loaded.

I found a few hacks online but it looks like jQuery is here to save the day again.

$(document).ready(function(){
$("html").css("font-family","SuperFontage");
});

Here I use SuperFontage as the example font. This tells the browser to only load SuperFontage after the whole page has fully rendered. Replace the SuperFontage with the custom font name you want and do not include it in the body and html of your css. Make sure you have a default font declared instead so the browser knows which font to render at the initial loading of the page, like so:

body, html{
font-family: 'Helvetica Neue', Arial, sans-serif;
}

And this worked perfectly for Chrome but for some reason, Firefox just didn't accept the custom @font-face. Strange. Upon further debugging, http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox tells me that I needed relative links for my fonts to work. This means that the links pointing to the source of my fonts needed to be hosted on my domain and they should be declared without, "http://".

For example:

@font-face {
	font-family: 'SuperFontage';
	src: url('/fonts/SuperFontage.otf') format('opentype');
}

This tells Firefox that my SuperFontage font is located on my domain in the fonts folder. If you are pointing to fonts located on another domain, that's whole different kettle of fish.