Firefox not recognizing custom font

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: www.moosecodes.com (its still under construction! please pardon the mess!)

Solution 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.

Solution 2

Each browser only reads one file type for webfonts. Unfortunately, they are all different file formats. In order for the font to display correctly in all browsers, you will need 4 different types of font file- TTF, WOFF, SVG & EOT. Your code will look something like this:

@font-face {
font-family: 'Zapfino';
    src: url('Zapfino.eot');
    src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
         url('Zapfino.woff') format('woff'),
         url('Zapfino.ttf') format('truetype'),
         url('Zapfino.svg#SansumiRegular') format('svg');
}

That code is based of the stylesheet included with FontSquirell fonts.

FontSquirell has a converter, but you do need to check your license. Zapfino is a commercial font owned by Adobe(?) and as far as I know using their fonts with @font-face is a violation of the fonts EULAs.

TypeKit offers commercial fonts for use with @font-face for a fee that complies with the foundries EULAs.

Comments

[Moose]

i will go with this approach since it seems to be the fastest way to fix the problem. I think your right about the corrupt file... how did you check that? I am going to play it safe and find a font that is free to use and looks good.. that way i wont have to add any more unnecessary and messy hacks to my code... and i wont have to worry about copyright issues.. by the way, the font is owned by Apple... i think...

[random_user_name]

I downloaded the file to my computer, and when I acted as though I was going to install it, Windows tells me it's corrupted.