CODEWITHSUNDEEP
cssfonts
maddogandnoriko
maddogandnoriko

Reputation: 1002

css @font-face not woking in FF

My custom font face is not being applied in FF. This does work in Coda(my development app). And also in Safari...

The CSS:

@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.ttf');
}
/* IE9+ */
@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.eot');
    }
    #tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}

The HTML:

<div id="tagCommon"></div>

The site is http://tntplants.site11.com/. When you type letters into the top box on the right it should be in giddyup script font on the left.

Upvotes: 0

Views: 396

Answers (4)

Zuul
Zuul

Reputation: 16269

All the major browsers have decided to go their own way with font formats that they choose to support:

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.

So, to have a full and proper support you need to follow a certain structure when declaring the face-face:

CSS FONT-FACE e.g.

@font-face {
    font-family: 'GiddyupWebRegular';
    src: url('giddyup-webfont.eot');
    src: url('giddyup-webfont.eot?#iefix') format('embedded-opentype'),
         url('giddyup-webfont.woff') format('woff'),
         url('giddyup-webfont.ttf') format('truetype'),
         url('giddyup-webfont.svg#GiddyupWebRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

See the working example here!

Download the generated CSS with the fonts and CSS here!

The above links were generated using a font-face code generator, you upload the font and the code pops out for you:

Font Squirrel

For more information, read this article from the MDN.

Upvotes: 2

Nimphious
Nimphious

Reputation: 5039

MyScriptFont is not the same as 'MyScriptFont'.

Change your font-family declaration in #tagCommon to MyScriptFont or change it in @font-face to 'MyScriptFont'.

@font-face {
  font-family: 'MyScriptFont';
  src: url('fonts/giddyup.ttf');
}
/* IE9+ */
@font-face {
  font-family: 'MyScriptFont';
  src: url('fonts/giddyup.eot');
}
#tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}

Upvotes: 0

David Nguyen
David Nguyen

Reputation: 8508

First thing I would do is to switch out your font stack to one from Font Squirrel

@font-face {
    font-family: 'Name';
    src: url('Name.eot');
    src: url('Name.eot?#iefix') format('embedded-opentype'),
        url('Namet.woff') format('woff'),
        url('Name.ttf') format('truetype'),
        url('Name.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 0

user1337
user1337

Reputation: 847

Swap your CSS declarations around - put the TTF one after the EOT one. Eg

/* IE9+ */
@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.eot');

@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.ttf');
}
    }
    #tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}

Upvotes: 1

Related Questions