Con Javascript <script type="text/javascript">
function preCargar() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
}
</script>
y en el body
<body onLoad="preCarga ('1.gif', '2.gif', '3.gif')">
con Css:
<style type="text/css">
img.precarga {display:none;}
</style>
y en el Body:
<img src="1.gif" alt="" height="350" width="350" class="precarga" />
<img src="1.gif" alt="" height="350" width="350" class="precarga" />
<img src="1.gif" alt="" height="350" width="350" class="precarga" />
aumque resulta extraña la demora teniendo en cuenta el tamaño que indicas. Habría que revisar como estás haciendo el efecto "hover"
Si la fuente especial es un ttf, podés usar la propiedad fontface de css.
finalmente si usas imágenes, te recomiendo este sistema que utiliza 1 sola imagen por cada elemento del menu.
http://foros.emprear.com/css/rollove...ver-input.html
(te aclaro que en mi demo use un tag input, pero el sistema es aplicable a cualquier otro) usa background-image y de ser necesario un gif transparente de 1x1 px)
Saludos