CODEWITHSUNDEEP
cssfont-face
dtrunk
dtrunk

Reputation: 4805

Overwrite font-weight in @font-face

Currently I'm using @font-facewith a fallback for not supported browsers:

@font-face
{
  font-family: TheSansBlack;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
}

font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;

In some cases the fallback should be bold, so I have some css notations like:

#foo
{
  font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

And because I'm using a font called TheSansBlackthere's no need to set font-weight: bold

But this won't work:

@font-face
{
  font-family: TheSansBlack;
  font-weight: normal;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
}

It still displays the bold one which looks ugly, because it's double bold with TheSansBlack... I just need to set font-weight to bold on the fallback, not the woff font.

EDIT: I also tried this without success:

@font-face
{
  font-family: TheSansBlack;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );

  #foo
  {
    font-weight: normal !important;
  }
}

#foo
{
  font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

Upvotes: 4

Views: 1830

Answers (1)

dtrunk
dtrunk

Reputation: 4805

Got it :-)

I had to set font-weight explicitly to bold in @font-face.

Dunno why...

EDIT: full example

@font-face
{
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
  font-family: TheSansBlack;
  font-weight: bold;
}

#foo
{
  font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

This results in normal TheSansBlack and bold Arial/Verdana/Helvetica in older browsers.

Upvotes: 1

Related Questions