@Font-Face Does Not Work Properly for Italic/Bold Fonts

Local Font Declaration Not Loading Italic/Bold

The issue you're facing is because you've told it to look for the same local font file instead of defining the weight/font-style for each instance.

Try to add font-weight/style in src: local for example:

src: local('Open Sans 400'), //Regular
src: local('Open Sans 400i'), //Regular Italic
src: local('Open Sans 700'), //Bold
src: local('Open Sans 700i'), //Bold Italic

or alternatively you could use:

src: local('Open Sans'),
src: local('Open Sans Italic'),
src: local('Open Sans Bold'),
src: local('Open Sans Bold Italic'),

Bold / Italic doesn't work on custom fonts using PhantomJS

I just found the solution. You need to provide a font-style and a font-weight to your font-face

Here is my final code:

@font-face {
    font-family: 'userSelectedFont';
    font-style: normal;
    font-weight: normal;
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf");
}

What can be the reason for @font-face failing to work?

You're most likely confusing a font face with a font family:

"Lucida Sans Unicode" is a font family
"Lucida Bold Italic" is a font face

In short, a font family is a group of font faces.

@font-face declares a font face joining some custom family. src is the path to a font face file, and that is likely where the problem is:

src: local('Lucida Sans Unicode'), local('Times New Roman');

That's two font families being used as the src of a font face.

Presumably Chrome handles this easily made mistake and uses the 'normal' font face from the family whenever it spots that this has happened.

So, what you probably meant was this:

@font-face {
  font-family: 'MyBoldFont';
  font-style: italic;
  font-weight: bold;
  src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic');
}

.bold-font {
    font-family: 'MyBoldFont';
}

Whenever the text is bold, italic and uses .bold-font, you'll see your custom font face show up, like this simple example:

<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.

Here it is as a fiddle.

font-face bold doesn't work in Chrome and Firefox

I figured it out. I downloaded the font again, it seems that the font itself had an issue.

Embedding font stops italics from working, how was it working initially?

The browser simply fakes bold or italic styles of a font. If the actual font-family does not include a bold or italic font, but the text is styled as bold or italic, then the browser sort of creates that style for us to see.

For more detail on this: https://alistapart.com/article/say-no-to-faux-bold

How should I use font file for bold, italic, etc in html canvas?

You will need to define your font in css using @font-face with all the weights. Define same font-name for all the styles, just differentiate them with font-weight like below

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-light.ttf");
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-thin.ttf");
  font-weight: 100;
}

and then use it in your elements like

element {
  font-family: Roboto;
  font-weight:100; /* for Thin */
  font-weight:300; /* for Light */
  font-weight:normal; /* for Regular */
  font-weight:bold; /* for Bold */
}

Or you can use html <link> to embed your font like

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500" rel="stylesheet">

Using @fontface fonts load italic

As David Stone's answer on the authoritative answer to @fontface questions states, this spec says that oblique, italic IS valid.

As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.

On digging into the webkit bug reports, I discovered that the value for font-style as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec, only one value is allowed for the font-style property, rather than a comma-separated list.

So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant normal." And overrides your previous normal declaration.

tl;dr: If font face is rendering all italic fonts:

font-style: italic, oblique;

should be

font-style: italic;