CODEWITHSUNDEEP
htmlcssfirefoxfontsfont-face
user3229958
user3229958

Reputation: 1

firefox does not accept @font-family declaration

I'm having trouble, specifically with Firefox, in accepting a particular @font-face.

Here's a snippet of what I did:

@font-face {
  font-family: "Cursive";
  src: url(./MTCORSVA.TTF) format("truetype");
}

.cursivefont {
  font-family: "Cursive", Verdana, Tahoma;
  font-size: 24pt;
  font-weight: bold;
}

@font-face {
  font-family: "Impact";
  src: url(./impact.ttf) format("truetype");
}

.impactfont16 {
  font-family: "Impact", Verdana, Tahoma;
  font-size: 16pt;
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: "overrun";
  src: url(./AMBROSIA.TTF) format("truetype");
}

.ambrofont {
  font-family: "overrun";
  font-size: 20pt;
  font-weight: bold;
}
<span class=cursivefont>Join the Fight for Gunder’s Bight!</span>
<span class=impactfont16>E F</span>
<span class=ambrofont>UNCLE GLUSSOG'S TALENT PARADE</span>

In Windows IE (Edge) and Android Opera and Android native browser all three work. In Windows Firefox and Chrome, and Android Firefox only the impactfont and cursivefont work, and a default font is used for ambrofont. Though, occasionally and inconsistently, Windows Firefox shows the correct font, but at the next refresh it doesn't.

I've tried cache clearance, reboot and start again etc.

Upvotes: 0

Views: 201

Answers (3)

Sunil Boricha
Sunil Boricha

Reputation: 456

Which Firefox version in your system or face this issue? Because Firefox less then "3.5" does not support external fonts.

Also one more problem. Firefox: Disabled by default, but can be enabled (need to set a flag to "true" to use WOFF2).

I have test your code in "snippet" with Firefox and Chrome working perfect.

Upvotes: 1

user3229958
user3229958

Reputation: 1

I'm coming to the conclusion that it's the Ambrosia font, or perhaps my copy of the AMBROSIA.TTF file that's at fault. I've substituted a different font for Ambrosia and it works every time.

I can't spend any more time on this - I have a publication deadline for Mythaxis - but I'm not closing the door. If anyone has a bright idea, I'd be interested.

Upvotes: 0

R&#233;my Testa
R&#233;my Testa

Reputation: 897

Did you forget double quotes around your name class ?

<span class=cursivefont>Join the Fight for Gunder’s Bight!</span>
<span class=impactfont16>E F</span>
<span class=ambrofont>UNCLE GLUSSOG'S TALENT PARADE</span>

To

<span class="cursivefont">Join the Fight for Gunder’s Bight!</span>
<span class="impactfont16">E F</span>
<span class="ambrofont">UNCLE GLUSSOG'S TALENT PARADE</span>

Upvotes: 1

Related Questions