How to Use Font-Weight with Font-Face Fonts

Multiple font-weights, one @font-face query

Actually there is a special flavor of @font-face that will permit just what you're asking.

Here's an example using the same font-family name with different styles and weights associated with different fonts:

@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;
}

---

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

---

For a full overview of this feature and the standard use take a look at this article.

---

EXAMPLE PEN

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

@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/

How to declare CSS font-face with font-weight and font-style properly?

There could be a number of reasons why it doesn't work:

1. Your paths to the font files are not correct (make sure the .css file is in the same folder with the .ttf files. If they're not, make sure the paths in your CSS point to the correct location.

2. Your browser might not be able to render .ttf files. Please check and, if necessary, provide additional file formats (.eot,.woff, .svg) for cross-browser compatibility. You might want to use a web-font generator for this. My personal favorite is fontsquirrel, but I don't recommend or endorse it. I just use it. :)

3. Perhaps you're not referencing the @font-face correctly in your CSS? Correct form is:

your-element.your-class {
  font-family: 'Open Sans', sans-serif;
  font-weight: normal|bold|{exact-weight};
  font-style: normal|italic;
}

Also, please note that the @font-face must be declared before you use it. CSS reads once, only goes forward and must be able to interpret the code when it reads it.

Note: bolder and lighter are not valid CSS values for font-weight property inside @font-face descriptor (as very well pointed out by BoltClock, in the comments). It is recommended to use exact font weights (100 - 900) to make sure your font is rendered the same cross-browser. (i.e.: replace font-weight: bolder; with font-weight: 900; and font-weight: lighter; with font-weight: 200;). (Or use your preferred values, of course).

CSS @font-face Only Loading 2 Font-Weights

You're using invalid font-weight keywords. (See MDN: font-weight)

Style names like "light" or "medium" are commonly used in desktop environments (e.g using a graphic application) – these style names are actually stored in a font file (at least in formats like truetype/ttf).

However, browsers can't use these internally stored style names and need an explicit style/weight mapping like so:

@font-face {
  font-family: myFont;
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/myFont-Light.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
@font-face {
  font-family: myFont;
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/myFont-Black.ttf") format('truetype');
}

body {
  font-family: myFont, sans-serif;
}

.thin {
  font-weight: 100;
}

.medium {
  font-weight: 500;
}

.black {
  font-weight: 900;
}

I strongly recommend using numeric font-weight values for better compatibility as well as specifying the format like format('truetype')

You should also include a font-style to map normal and italic styles.

How can I get multiple font weights working using @font-face

The problem is in the minified CSS. In WordPress, child themes need to have a Template header in style.css stylesheet. If this is missing, the theme will be "broken" and cause random issues.

/*
Theme Name: foo
Version: foo
Description: foo
Author: foo
Author URI: foo
template: foo
*/

How I found the answer: Having broken theme also prevented upload of featured image for posts and in solving that, the fonts were also resolved.

webfonts: @font-face should include font-style and font-weight?

Yes, you should. The font-weight and font-style specify what you consider the font face to be. This means that you can embed a what is designed by an author to be a regular font face, as a bold font face. This also means that when you use such font face, you'd better use font-weight: bold, unless there are no alternatives in which case the user agent will select the font face anyway.

In your case:

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: /* The URL of the resource containing the non-slanted regular font face. */
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: bold; /* or 700 */
    src: /* The URL of the resource containing the non-slanted font face with 'bold'/700 glyphs. */
}

If you don't specify font-weight in your @font-face rule, your font face is assumed by user agent to have glyphs with the default weight of 400 ("regular"). Consequently, not specifying font-weight in rules that reference your font face, still defaults to same font weight, and everything is fine, there is no conflict.

I also frequently use numeric font weights, because all too often custom fonts are divided into semi-bold and extra-bold gradations, so having something like font-weight: 600 lets you select an embedded semi-bold font face (which also has font-weight: 600 in its corresponding @font-face rule).

---

Related Topics