@Font-Face Question

HTML & CSS
1

Hi Guys,

I’m using the @font-face rule to embed fonts on my site that are stored on my server.

My problem is this:

I’m using a bold sans serif face, so obviously I don’t specify font-weight: bold; as then the browser would try to bold the already bold font and it would look horrible.

So far - so good. I want to use “Arial” as my fallback font (next in the stack) but I need to let the browser bold it and increase it’s size without affecting the embedded.

Any ideas guys?

Cheers,
simon

2 

@font-face {
  font-family: "MyFont";
  src: url( "not-bold-font.ext" ); 

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MyFont";
  src: url( "is-bold-font.ext" );

  font-weight: bold;
  font-style: normal;
}

div { font-family: MyFont, Arial; font-weight: bold; }

That is how you setup font variations (bold, italic) with @font-face, they must all have the same font-family name along with font-weight and font-style dictating the type of variant. Btw, programs do not actually bold fonts, the swap a non-bold font for a bold variant version. In some cases if no bold varuant is available for the current font it swaps to a font, that may or may not look like it, that has bold variant.

3

Hi,

but I need to let the browser bold it and increase it’s size without affecting the embedded.

Font-size-adjust was supposed to address this issue but is only available in Firefox at the moment. there’s not much you can do for other browsers except pick a fall-back font that is closer in size.

so obviously I don’t specify font-weight: bold

I believe if you create another rule for your font-face and adding font-weight:bold to it (but still referencing the src of the lighter font) you will trick the browser into believing that is has found the bold version of your font and not apply its faux bolding to it. The fallback font will still get bolded though. See this article for more info. (It’s sort of the opposite of what Logic_earth suggest above ;)).

4

Actually it the same thing I posted…just I was more simpler by doing it all from the top of my head and without any explanation. >.>