How to use font-weight with font-face fonts?

Question

I've got two font files like: FONT-light and FONT-bold. Both come from @font-face kit so each version has like 5 font files included (OGV, TTF, WOFF, EOT).

To go from light version to bold version I have to use font-family: FONT-light; and then font-family: FONT-bold;. I want to use font-weight: light; and font-weight: bold; instead because I need it to CSS3 transitions. How do I achieve that?

Solution 1

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Solution 2

To use the font-weight and the font-style properties on embedded fonts (@font-face) isn't so simple. There are a few items that you need to care about.

1 - @font-face Syntax:

The syntax is very important to use the font over all browsers. Paul Irish, with many resources, wrote the 'Bulletproof Syntax', as is shown above, which was improved several times:

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME.eot?') format('eot'), url('FONT-NAME.woff') format('woff'),     url('FONT-NAME.ttf') format('truetype');
}

This version (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/, look for 'The Fontspring @font-face syntax'), is the most recent and works from IE6, on iOS, Android. It's important to take a look on the link to learn well why it should be written in that way.

2 - Font properties like font-weight and font-style

If you want, is possible to apply the font-weight and font-style on the @font-face declaration to use variations of the same font, but you need to be specific and precise about these characteristics. There are some ways to do it.

2.1 - Using one font-family to each variation

Using the 'Bulletproof Syntax', supposing that you want to load the 'Normal', 'Bold' and 'Italic' variations, we have:

@font-face {
  font-family: 'FONT-NAME-normal';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

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

@font-face {
  font-family: 'FONT-NAME-bold';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

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

@font-face {
  font-family: 'FONT-NAME-italic';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

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

So, to use the variation that you want, you have to call the font-family that corresponds to it AND declare on the rule the font-weight: normal and font-style: normal. If you don't, the browser may apply the 'faux bold/italic' to the element that have this rules by default. The 'faux' styling works forcing the element to be shown with it, even if is already using an italic or bold font. The problem with is that the font always looks ugly because isn't the way that was made to look.

The same occurs when you define a 'Normal' font, for example, on a <p> element and, inside of it, you place a <strong> or <em>. The <strong> and <em> will force the bold/italic process over the font. To avoid that, you need to apply the correct font-family, destinated do the be bold/italic, to a rule for <strong> and <em>, with their respective properties (font-weight and font-style) set to normal:

strong {
  font-family: 'FONT-NAME-bold';
  font-weight: normal;
  font-style: normal;
}

em {
  font-family: 'FONT-NAME-italic';
  font-weight: normal;
  font-style: normal;
}

But there is a problem with it. If your fonts don't load the fallbacks choosen will lost their weights/styles. This leads us to the next way.

2.2 - Using the same font-family name, but different weights and styles

This way is more simple to handle through several weights and styles AND fallbacks correctly if your fonts don't load. Using the same example:

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

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

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

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

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

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

In this method, the weights and styles in the @font-face declarations act as “markers”. When a browser encounters those weights and styles elsewhere in the CSS, it knows which @font-face declaration to access and which variation of the font to use.

Make sure if your weights and styles match. If so, when you use a <strong> or <em> inside a parent which is using the @font-face that you created, it will load the right declaration.

---

In the source of these methods of stylization embedded (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/), have another method that combines the two that I've mentioned (the 2.1 and 2.2). But it brings a lot of problems, including the 'faux bold/italic', forcing you to declare to the <strong> the right font-family and, for the <em>, classes that styles over the variations of the font that differs in weight. I guess the two that I've choosed are good enough to do the job.

Sources: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

Edit 1:

There's no need to use a lot of font extensions. The .woff type attends almost every browser, except for IE, if you need to give support for IE8 (which accepts only .eot format). (http://caniuse.com/#feat=fontface)

Other tip that maybe is useful is to embed the font on the CSS using base64 encoding. This will help avoiding a lot of requests, but you need to remember that it'll overwight the CSS file. This can be handled organizing the CSS content and the fonts to give the first CSS rules quickly in one small file, delivering the others on another CSS file, on the close of <body> tag.

Solution 3

you can add number to font-weight property, for example to the light version.

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder.