Custom font-face available only on refresh

I have ran into a small problem - my custom font-face definition works but only after the page have been reloaded at least for once.
Basically, when I open my browser, it shows the default Verdana - only when I reload it, it switches to my custom font and stays at it.

Is there a way to make it look ok right from the very beginning ?
I know I could simply put a redirect to reload it but IMHO it would be quite lame ..

Also, does anybody know how to get custom font-faces ( e.g. MyriadPro ) work on IE ?

 

For IE use EOT font format.

Example

@font-face { font-family : "MyriadPro";
src : url("MyriadPro.eot");
src : url("MyriadPro.ttf") format("truetype");
}

Use http://www.fontsquirrel.com/ for font code generation and all format fonts download.

Read this
http://www.960development.com/how-to-write-cross-browser-font-face-syntax/

 

Another useful resource at http://www.fontspring.com/fontface

 

Converted it to eot and still got nothing - IE continues to ignore me ..

 

Have you used the right CSS syntax? For font-face it is quite convoluted like below:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('League_Gothic-webfont.eot');
    src: url('League_Gothic-webfont.eot?iefix') format('eot'),
         url('League_Gothic-webfont.woff') format('woff'),
         url('League_Gothic-webfont.ttf') format('truetype'),
         url('League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

Code (markup):