Question

I am using the following CSS to define a custom font on a webpage:

@font-face
{
    font-family:zapfino;
    src:url("zapfino.ttf");
}

Next, I am defining an id that uses it:

#custom_font
{
    font-family:zapfino;
    font-size:18px;
}

I’ve tested the page on Safari and Chrome and it works fine. However, in firefox the font is not showing up, it is reverting to a default. Sorry if this is a repost but I have searched on StackOverflow and cannot find the answer! Does anyone know why this is happening? see it here: http://www.moosecodes.com (its still under construction! please pardon the mess!)

Answer 1

jlego is right – you should check out the FontSquirrel site – they have an excellent tool for building your kit and converting your files for you, AND you must always be sure that the font is legal to use on your site.

However Firefox and Chrome should both support TTF, which is the format you are using.

In researching your problem on your site, what I’ve found is that the font is not rendering properly in any browser I check in. What I’ve found is while the stylesheet is referencing the right file location, but the font file appears to be corrupted. I would suggest getting a new font file new replace the one you are using.