Question

First and foremost, I have tried searching and can’t really find anything that will help this specific problem.

Basically I have my website http://www.jamesendres.com and I am trying to load a custom web font from http://justanotherfoundry.com/facit-web. When I was developing my website on my local machine it worked flawlessly, but when I uploaded all of my files to Dreamhost, the fonts aren’t being loaded.. I opened Firebug and apparently the fonts are being downloaded last so I think this might have something to do with why they aren’t being loaded. But I could be wrong. In my main.css file is where all of my font-related configurations are.

For help purposes I have made the homepage default to whatever the browsers default is to show it’s not working:

@font-face{
    font-family:'FacitWeb-Extralight';
    src:url('http://webfonts.justanotherfoundry.com/Facit/FXL');
    font-weight:bold
}

p, li{
font-size:14px;
/*font-family:'FacitWeb-Extralight', Verdana, Trebuchet MS, Arial, sans-serif;*/
font-family: FacitWeb-Extralight;
line-height:18px;
}

Answer 1

Instead of simply writing a direct @font-face, you should use one of the font-face generators out there.

I pesonally recommend Font Squirrel. They keep the generator up to date.

The benefits include

• Advanced font-face syntax for correct loading across browsers
• Automatic IE-style font generation
• Good fallback design when @font-face is not supported.