Home/ Questions/Q 3495582
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:08:39+00:00

This is code generated from FontSquirrel, and working great in every other browser (including

  • 0

This is code generated from FontSquirrel, and working great in every other browser (including IE), but not the mighty Firefox! What am I doing wrong?

(ps- I am using FF3.5)

If you can’t view my example, here is the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Fonts Firefox test</title>

<style type="text/css">
/*********** CHEVIN @font-faces **********/
@font-face {
font-family: ChevinLight;
src: url(uploads/fonts/chevilig-webfont.ttf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ChevinBold;
src: url(uploads/fonts/chevibol-webfont.ttf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ChevinExbold;
src: url(uploads/fonts/cheviextbol-webfont.ttf);
font-weight: normal;
font-style: normal;
}

/*********** @font-faces FOR IE **********/
@font-face {
font-family: ChevinLight;
src: url(uploads/fonts/chevilig-webfont.eot);
}
@font-face {
font-family: ChevinBold;
src: url(uploads/fonts/chevibol-webfont.eot);
}
@font-face {
font-family: ChevinExbold;
src: url(uploads/fonts/cheviextbol-webfont.eot);
}

/* Styles */
h1 {
font-family: ChevinLight, Arial, Helvetica, sans-serif;
}
h2 {
font-family: ChevinBold, Arial, Helvetica, sans-serif;
}
p {
font-family: ChevinExbold, Arial, Helvetica, sans-serif;
}

</style>

</head>
<body>

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</p>

</body>
</html>

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Firebug shows that good old Foxy tries to load the *.eot versions, seems stupid but it simply loads the last definition.

    You should wrap the IE part with a conditional comment:

    <!--[if IE]>
@font-face {
font-family: ChevinLight;
src: url(uploads/fonts/chevilig-webfont.eot);
}
@font-face {
font-family: ChevinBold;
src: url(uploads/fonts/chevibol-webfont.eot);
}
@font-face {
font-family: ChevinExbold;
src: url(uploads/fonts/cheviextbol-webfont.eot);
}
<![endif]-->

    Other way would be to put the IE definitions at the top.

    Some bugs:
    https://bugzilla.mozilla.org/show_bug.cgi?id=472647 – Either ignore .eot or support it
    https://bugzilla.mozilla.org/show_bug.cgi?id=520357 – “We do not (and will not) support EOT.”[sic]

    Yeah, usual Mozilla unpropress.

    • 0