Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Overwrite font-weight in @font-face

Overwrite font-weight in @font-face

Problem

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;
}
Problem courtesy of: dtrunk

Solution

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.

Solution courtesy of: dtrunk

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Overwrite font-weight in @font-face

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×