Loading Fonts

Recommend this page to a friend!

      Fast Page Content Loader  >  Fast Page Content Loader package blog  >  Load Page Content Fas...  >  All threads  >  Loading Fonts  >  (Un) Subscribe thread alerts  
Subject:Loading Fonts
Summary:Can this be used to load fonts?
Author:Warren Bedell
Date:2011-03-01 13:40:50
Update:2011-03-04 01:04:20

  1. Loading Fonts   Reply   Report abuse  
Warren Bedell - 2011-03-01 13:40:50
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?

  2. Re: Loading Fonts   Reply   Report abuse  
red indian - 2011-03-01 14:27:58 - In reply to message 1 from Warren Bedell
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.

  3. Re: Loading Fonts   Reply   Report abuse  
Warren Bedell - 2011-03-01 17:15:00 - In reply to message 2 from red indian
Thanks for the quick response! I'll give that a try.

  4. Re: Loading Fonts   Reply   Report abuse  
Manuel Lemos - 2011-03-01 21:42:45 - In reply to message 1 from Warren Bedell
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?

  5. Re: Loading Fonts   Reply   Report abuse  
Warren Bedell - 2011-03-03 16:48:25 - In reply to message 4 from Manuel Lemos
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!

  6. Re: Loading Fonts   Reply   Report abuse  
Manuel Lemos - 2011-03-04 01:04:20 - In reply to message 5 from Warren Bedell
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.