Loading Fonts

Could fonts be loaded at high priority to minimize the flash of the default font while the font file downloads? If so, what would the script look like?

I don't think this script can be used for loading fonts.

But my guess is you could preload the font using an image by setting the font file as its source.

Your page then stays empty until the font is loaded I think. Also for browsers that do not support custom fonts. So that is a downside. But you could detect the browser and then act accordingly.

Just lookup preloading images in javascript and try setting your font file instead of the image.

Thanks for the quick response! I'll give that a try.

It depends on how you do it.

What the content loader object does is defer the load of HTML and eventually contained JavaScript to a different point of the page making the resulting HTML be loaded in the original point.

What is the HTML you would use to load fonts?

There are at least two approaces to specifying an external font in HTML.

The first is to use a service like Google's font API to download the font on-demand from their CDN. Something like this (watch for word-wrap):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif|Droid+Sans">

The second way is to store the font on the server along with the HTML page and add some CSS to load the font:

<style type="text/css">
@font-face {
font-family: 'VanillaRegular';
src: url('fonts/Vanilla-webfont.eot');
src: url('fonts/Vanilla-webfont.eot?iefix') format('eot'),
url('fonts/Vanilla-webfont.woff') format('woff'),
url('fonts/Vanilla-webfont.ttf') format('truetype'),
url('fonts/Vanilla-webfont.svg#webfontJgXy5dCM') format('svg');
font-weight: normal;
font-style: normal;
}

Either way, the HTML involves CSS stylesheet settings. Is that something that can be controlled?

Thanks in advance!

I do not think that it is possible to control when the font is actually load when you declare it that way. The problem is that is just a declaration. The actual load may not even happen if the font is not used at all in the page. It may only be loaded when it is first used.

What you may be able to do is to defer the load of the font if you delay all content that uses it, or maybe set all content to use some default font, and switch to the remote font programmatically using some custom JavaScript code at the end of the page.