After the deep and thorough studies by Steve Souders on web fonts, there's surely a lot of concern among web developers about web fonts and their impact on page performance. However, such a concern should not be taken too seriously, because the interesting results reported by Steve concern only web fonts included via the CSS @font-face rule. In short, Steve found out that this kind of font embedding creates a peculiar effect on web pages: fonts are first rendered without the specified web font and only later the font is completely loaded. This actually slows down page loading.
The example quoted above doesn't take into account the fonts embedded via JavaScript. The technique used in JavaScript is also known as cufon and is made up of two components:
- the cufon loader
- the web font to be loaded
Example:
<script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'/>
<script src='chunkfive.cufonfonts.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace('h3, h4', { fontFamily: 'ChunkFive-Roman', hover: true });
</script>
Unfortunately, the side effect of this technique is exactly the same as the aforementioned CSS technique: fonts are first rendered without styles and styled only later.
Apparently, the only way that has a minimum impact on page performance seems to be the inclusion via the link element proposed by Google with its web fonts. I didn't notice any significant impact on page loading using this technique.