CODEWITHSUNDEEP
cssfirefoxfont-familycustom-font
Moose
Moose

Reputation: 1317

Firefox not recognizing custom font

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!)

Upvotes: 2

Views: 10636

Answers (3)

random_user_name
random_user_name

Reputation: 26170

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.

Upvotes: 3

bbbwex
bbbwex

Reputation: 732

I had the same problem.... the answer by jlego was usefull to me. My font was recognized in Chrome and IE. In FF my TTF wasn't recognized untill I added the format('truetype') in my css file.

Upvotes: 0

biggles
biggles

Reputation: 3061

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.

Upvotes: 4

Related Questions